@depict-ai/ui 4.1.8 → 4.2.1

package/latest/index.d.ts

@@ -1,5 +1,5 @@
-import { Accessor, JSX, Signal, Setter } from "solid-js";
-import { Display, ModernDisplay, Elem, ColsAtSize, report, Amazing_Slider, TwoLetterMarket, Node_Array } from "@depict-ai/utilishared/latest";
+import { JSX, Accessor, Signal, Setter } from "solid-js";
+import { Display, ColsAtSize, report, Amazing_Slider, ModernDisplay, Elem, TwoLetterMarket, Node_Array } from "@depict-ai/utilishared/latest";
 import { SearchFilter, SearchRequestV3, SortModel } from "@depict-ai/types/api/SearchRequestV3";
 import { ContentLink, SearchResponse, SearchFilter as _SearchFilter1 } from "@depict-ai/types/api/SearchResponse";
 import { Ancestors, ListingSuggestion, SearchSuggestionsResponseV3 } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
@@ -10,13 +10,251 @@ 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 _SearchFilter3 } from "@depict-ai/types/api/SearchRequestV2";
-export const version = "4.1.8";
+export const version = "4.2.1";
+declare const LISTING_ID = "listingId";
+declare const EXTERNAL_ID = "externalId";
+type ScrollRestorationData = {
+  min_results_loaded: number;
+  for_id: string;
+}[];
+export type SDKGridSpacing = string | {
+  horizontal: string;
+  vertical: string;
+};
+export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+export type FilterWithData = WithRequired<SearchFilter, "data">;
+export interface SDKRenderingInfo {
+  /**
+   * If you call this function with a provided function, the provided function will be called whenever the index of the currently displayed product changes.
+   */
+  set_on_index_change: (fn: (index: number) => void) => void;
+}
+export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
+type AddActualFieldToArray<T> = T extends Array<infer U> ? (U & {
+  actual_field?: string;
+})[] : never;
+type AddActualFieldToFilters<T extends SearchFilter[] | undefined> = T extends undefined ? undefined : AddActualFieldToArray<T>;
+export type SDKColsAtSize = [number, number?][];
+/**
+ * Transform SDK ColsAtSize into valid Layout ColsAtSize
+ * @param cols_at_size [nbCol, maxWidth]
+ * @returns
+ */
+export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
+/**
+ * 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.
+ */
+export function ProductCardIndexProvider(props: {
+  children: JSX.Element;
+  index_: Accessor<number>;
+}): JSX.Element;
+/**
+ * Use this to get an accessor containing the index of your product card.
+ */
+export function useProductCardIndex(): Accessor<number> | undefined;
 /**
  * This is a function that will safely clone an object that may contain promises.
  * It will use structuredClone to clone the object and then re-apply (copy) any promises that were in the original object to the cloned object.
  * @param obj Anything to clone
  */
 export function promiseSafeStructuredClone<T>(obj: T): T;
+declare class SDKError extends Error {}
+export class ProductCardError extends SDKError {
+  constructor(templateError: Error);
+}
+export function SentryErrorBoundary(props: {
+  children: JSX.Element;
+  message_: string;
+  severity_: Parameters<typeof report>[1];
+  on_error_?: (retry: VoidFunction) => JSX.Element | void;
+  class_list_?: string[];
+}): JSX.Element;
+export type SolidLayoutOptions = {
+  cols_at_size: ColsAtSize;
+  grid_spacing: string;
+  rows: {
+    start_rows?: number;
+    rows_per_click?: number;
+    currently_visible?: Signal<number>;
+    max_rows?: number;
+    button?: JSX.Element;
+    view_less_button?: JSX.Element;
+  } | "all";
+  layout: "slider" | "grid";
+  disable_partial_rows?: boolean;
+  override_vertical_spacing?: string;
+  children: JSX.Element;
+  element_attributes: Omit<JSX.HTMLAttributes<HTMLDivElement>, "classList">;
+};
+/**
+ * SolidLayout: SolidJS adaption of Layout. Calculates CSS for a grid or slider with a certain spacing and certain number of columns at certain screen sizes, including a view more button. All properties are reactive.
+ * @property       rows                  if set to 'all': Just generate grid styling without any viewing/hiding functionality. If an object: start_rows is the number of rows at the beginning. rows_per_click is the amount of rows to view on each view more button click. button is the view more button to display. currently_visible is a signal that you can use to get and set the number of currently viewed rows
+ * @property       cols_at_size          An array with sub arrays looking like this: `[n_cols, min_width_media_query, max_width_media_query, grid_spacing_for_size]`, everything after `[n_cols, min_width]` is optional. falsey value for `min_width = no min_width`
+ * @property       grid_spacing  spacing to use if none is specified for the specific size in `cols_at_size`
+ * @property       disable_partial_rows  If set to `true`, will not let user press "show more" if next row is a partial row. Example of partial row: `cols_at_size` says we should have 4 recs in the next row, but we only have 2 left, so the row just gets 2 instead of 4, meaning it doesn't "fill out".
+ * @property override_vertical_spacing by default, the grid_spacing is used both horizontally and vertically, with this you can specify a separate spacing
+ * @return An accessor containing a CSS string
+ */
+export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
+/** @jsxImportSource solid-js */
+export function GenericSliderArrowButton(props?: {
+  width_?: number;
+  height_?: number;
+}): SVGElement;
+export function SlidableItems({
+  children,
+  slider_ref_,
+  faded_opacity_,
+  mutation_plugins_,
+  disable_fading_,
+  arrow_width_,
+  arrow_height_,
+  snapAlign_,
+  fadingThreshold_
+}: {
+  children?: JSX.Element;
+  slider_ref_?: (slider: Amazing_Slider) => any;
+  faded_opacity_?: number;
+  disable_fading_?: boolean;
+  snapAlign_?: "start" | "end" | "center";
+  fadingThreshold_?: number;
+  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
+  arrow_width_?: number;
+  arrow_height_?: number;
+}): JSX.Element;
+/**
+ * Provider to wrap every listing (group of products) in
+ * Used for example for deduplicating ResizeObservers for responsive images
+ */
+export function ListingProvider(props: {
+  children: JSX.Element;
+}): JSX.Element;
+/**
+ * Use this to get the context object if your component is within a ListingProvider
+ */
+export function useListing(): Record<symbol, any> | undefined;
+/**
+ * Base placeholder component used by ImagePlaceholder and TextPlaceholder
+ */
+export function BasePlaceholder(props: {
+  style: JSX.CSSProperties;
+  class?: string;
+}): JSX.Element;
+type ImagePlaceholderBaseOptions = {
+  style?: JSX.CSSProperties;
+  class?: string;
+};
+type ImagePlaceholderBlockOptions = {
+  width: string;
+  height: string;
+};
+type ImagePlaceholderImageOptions = {
+  aspectRatio: number | string;
+};
+/**
+ * A placeholder that can be used instead of an image or other block of content while it's loading.
+ * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
+ * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
+ * @property width If width and height is set, the defined width and height will be used.
+ * @property height If width and height is set, the defined width and height will be used.
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
+/**
+ * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
+ */
+export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
+/**
+ * Returns accessor with the size of the provided element, including padding and border (I think)
+ */
+export function make_accurate_width_accessor(what_to_watch: HTMLElement): import("solid-js").Accessor<number | undefined>;
+/**
+ * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
+ * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
+ * @property height height of the placeholder. Set to `1em` by default.
+ * @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
+ * @property class extra classes to add to the placeholder
+ * @property style extra styles to add to the placeholder
+ */
+export function TextPlaceholder(props: {
+  style?: JSX.CSSProperties;
+  height: string;
+  width: string;
+  class?: string;
+}): JSX.Element;
+export function DefaultInstantCardPlaceholder(): HTMLDivElement;
+/**
+ * ImageContainer for using the padding hack to set the aspect ratio of an image
+ * Put this around an <img> or <ResponsiveImg> to give it a container that always has the same size as the image. This prevents CLS and enables ResponsiveImg to work (the browser to load the correct image size)
+ * (Not using the CSS aspect-ratio property yet here due to browser support)
+ */
+export function ImageContainer(props: {
+  aspectRatio: number | string;
+  class?: string;
+  children?: JSX.Element;
+}): HTMLDivElement;
+/**
+ * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
+ */
+export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
+/**
+ * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
+ * Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
+ * 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").
+ * This is used for our responsive images:
+ * 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.
+ * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
+ * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
+ * You need to use insert(domNode, <ShopifyResponsiveImg size={sizeAccessor} src={src} />) if you want to insert the return value of this component into a DOM element manually, where you `import { insert } from "solid-js/web";` because we first want to insert the image once it has loaded.
+ */
+export function ShopifyResponsiveImg(props: {
+  resolutions?: number[];
+  size: Accessor<number>;
+  src: string;
+  loading?: "eager" | "lazy" | "force-lazy";
+  customUrls?: (url: string, width: number) => string;
+} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
+export const shopifyContainedImageContextSymbol: unique symbol;
+/**
+ * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
+ * Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
+ * Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
+ * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
+ * @property src image source
+ * @property aspectRatio aspect ratio of the image
+ * @property class extra class to add to the container
+ * @property alt alt text for the image
+ * @property autoAdjustAspectRatio whether to automatically adjust the aspect ratio of the image to the majority of the aspect ratios of loaded images in the current listing provider. Defaults to false. Can be overriden with css variable --image-aspect-ratio. If set to "smoothed", the aspect ratio will only be allowed to update after a 500ms setTimeout has finished since the aspect ratio last updated. This is for use when the image size is being transitioned and the aspect ratio too, to not restart the CSS transitions every time the aspect ratio changes slightly.
+ * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
+ */
+export function ShopifyContainedImage(props: {
+  src: string;
+  aspectRatio: number | string;
+  autoAdjustAspectRatio?: boolean | "smoothed";
+  class?: string;
+  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
+}): HTMLDivElement;
+/**
+ * Hacks ShopifyContainedImage work even for non-shopify image urls by forcing the format to be WebP
+ */
+export function ModernResponsiveContainedImage(props: Parameters<typeof ShopifyContainedImage>[0]): import("solid-js").JSX.Element;
+/**
+ * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
+ */
+export function LooksSlider(props: {
+  gridSpacing_: SDKGridSpacing;
+  columnsAtSize_: SDKColsAtSize;
+  productId_: string;
+  merchant_: string;
+  market_: string;
+  locale_: string;
+  imagePlaceholderAspectRatio_: number | string;
+  title_?: JSX.Element;
+  FavoriteButton_?: (props: {
+    display_: ModernDisplay | null | undefined;
+  }) => JSX.Element;
+}): HTMLDivElement;
 export const prefixes_to_preserve_in_history_dot_state: Set<string>;
 /**
  * Prevent, usually SPAs, from deleting our stuff from history.state when they call history.pushState with a new object they have constructed. This will only run once no matter how often it's called.
@@ -82,29 +320,6 @@ export function createDeparallelizedNoDropResource<T, X>(dependency: Accessor<T
  * @param fn the function to wrap
  */
 export function throw_globally<T extends (...args: any) => any>(fn?: T): (...args: Parameters<T>) => ReturnType<T> | undefined;
-declare const LISTING_ID = "listingId";
-declare const EXTERNAL_ID = "externalId";
-type ScrollRestorationData = {
-  min_results_loaded: number;
-  for_id: string;
-}[];
-export type SDKGridSpacing = string | {
-  horizontal: string;
-  vertical: string;
-};
-export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
-export type FilterWithData = WithRequired<SearchFilter, "data">;
-export interface SDKRenderingInfo {
-  /**
-   * If you call this function with a provided function, the provided function will be called whenever the index of the currently displayed product changes.
-   */
-  set_on_index_change: (fn: (index: number) => void) => void;
-}
-export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
-type AddActualFieldToArray<T> = T extends Array<infer U> ? (U & {
-  actual_field?: string;
-})[] : never;
-type AddActualFieldToFilters<T extends SearchFilter[] | undefined> = T extends undefined ? undefined : AddActualFieldToArray<T>;
 type DisplayTransformerAlwaysThereData = {
   merchant: string;
   market: string;
@@ -323,40 +538,11 @@ export function SolidFormatPrice(props: {
     places_after_comma_: number | "auto";
   };
 }): JSX.Element;
-export type SDKColsAtSize = [number, number?][];
-/**
- * Transform SDK ColsAtSize into valid Layout ColsAtSize
- * @param cols_at_size [nbCol, maxWidth]
- * @returns
- */
-export const convert_sdk_cols_at_size_to_layout: (cols_at_size: SDKColsAtSize) => ColsAtSize;
 /**
  * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
  * @returns A cleanup function to manually re-enable scrolling.
  */
 export function disable_scrolling(): () => void;
-declare class SDKError extends Error {}
-export class ProductCardError extends SDKError {
-  constructor(templateError: Error);
-}
-export function SentryErrorBoundary(props: {
-  children: JSX.Element;
-  message_: string;
-  severity_: Parameters<typeof report>[1];
-  on_error_?: (retry: VoidFunction) => JSX.Element | void;
-  class_list_?: string[];
-}): JSX.Element;
-/**
- * Provider to wrap every listing (group of products) in
- * Used for example for deduplicating ResizeObservers for responsive images
- */
-export function ListingProvider(props: {
-  children: JSX.Element;
-}): JSX.Element;
-/**
- * Use this to get the context object if your component is within a ListingProvider
- */
-export function useListing(): Record<symbol, any> | undefined;
 /**
  * Function that encodes a filter object into query parameters and sets them on the given URLSearchParams object.
  */
@@ -381,170 +567,6 @@ export function decode_sorting(search_params: URLSearchParams, sorting_query_par
  * @param sorting_query_param
  */
 export function strip_encoded_filter_and_sort(search_params: URLSearchParams, filter_query_param_prefix: string, sorting_query_param: string): void;
-/**
- * Base placeholder component used by ImagePlaceholder and TextPlaceholder
- */
-export function BasePlaceholder(props: {
-  style: JSX.CSSProperties;
-  class?: string;
-}): JSX.Element;
-/**
- * A Placeholder to use instead of some text, while it's loading. This is the inline version, meant to be embedded into sentences (or exist instead of them), etc.
- * If you want a block version, use `ImagePlaceholder` with `width`and `height` set instead.
- * @property height height of the placeholder. Set to `1em` by default.
- * @property width width of the placeholder. For specific number of characters use `ch`, ex: `width="7ch"`
- * @property class extra classes to add to the placeholder
- * @property style extra styles to add to the placeholder
- */
-export function TextPlaceholder(props: {
-  style?: JSX.CSSProperties;
-  height: string;
-  width: string;
-  class?: string;
-}): JSX.Element;
-/**
- * ImageContainer for using the padding hack to set the aspect ratio of an image
- * Put this around an <img> or <ResponsiveImg> to give it a container that always has the same size as the image. This prevents CLS and enables ResponsiveImg to work (the browser to load the correct image size)
- * (Not using the CSS aspect-ratio property yet here due to browser support)
- */
-export function ImageContainer(props: {
-  aspectRatio: number | string;
-  class?: string;
-  children?: JSX.Element;
-}): HTMLDivElement;
-/**
- * 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.
- */
-export function ProductCardIndexProvider(props: {
-  children: JSX.Element;
-  index_: Accessor<number>;
-}): JSX.Element;
-/**
- * Use this to get an accessor containing the index of your product card.
- */
-export function useProductCardIndex(): Accessor<number> | undefined;
-/**
- * Returns an accessor that will update when the size of the provided element changes, to be used with ResponsiveImg
- */
-export function makeSizeAccessor(whatToWatch: HTMLElement): Accessor<number>;
-/**
- * Automatically generate a srcset from the shopify CDN for an image and set the sizes attribute to the provided accessor.
- * Will also delay loading and decoding of image until the browser is idle (with 5s timeout) to improve filtering/loading more performance.
- * 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").
- * This is used for our responsive images:
- * 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.
- * 2. We set a ResizeObserver on one of the currently visible images (see makeSizeAccessor)
- * 3. We set the size attribute of all the visible images to the size of the container we're observing. The point of this is that the sizes attribute is used to determine which image to load, and usually it's set by the user and depends on the relationship between image size and viewport size. By using a ResizeObserver, we can make sure the sizes attribute is always set to the correct value without it having to be configured. This will make so the browser always loads the correct image size for a crisp image but still fast load.
- * You need to use insert(domNode, <ShopifyResponsiveImg size={sizeAccessor} src={src} />) if you want to insert the return value of this component into a DOM element manually, where you `import { insert } from "solid-js/web";` because we first want to insert the image once it has loaded.
- */
-export function ShopifyResponsiveImg(props: {
-  resolutions?: number[];
-  size: Accessor<number>;
-  src: string;
-  loading?: "eager" | "lazy" | "force-lazy";
-  customUrls?: (url: string, width: number) => string;
-} & Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, "srcset" | "src" | "sizes" | "loading">): JSX.Element;
-type ImagePlaceholderBaseOptions = {
-  style?: JSX.CSSProperties;
-  class?: string;
-};
-type ImagePlaceholderBlockOptions = {
-  width: string;
-  height: string;
-};
-type ImagePlaceholderImageOptions = {
-  aspectRatio: number | string;
-};
-/**
- * A placeholder that can be used instead of an image or other block of content while it's loading.
- * The placeholder has `display:block`, meaning it will create a new "row" in the layout for itself. Can be used either for images with a defined aspect ratio (ContainedImage) or blocks.
- * @property aspectRatio if aspectRatio is defined the placeholder will be in "image mode" and fill out the available width and then adjust the height according to the aspectRatio
- * @property width If width and height is set, the defined width and height will be used.
- * @property height If width and height is set, the defined width and height will be used.
- * @property class extra classes to add to the placeholder
- * @property style extra styles to add to the placeholder
- */
-export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): JSX.Element;
-export function DefaultInstantCardPlaceholder(): HTMLDivElement;
-export const shopifyContainedImageContextSymbol: unique symbol;
-/**
- * Abstraction built on top of ShopifyResponsiveImg. This is your one-stop-shop If you just need a responsive image.
- * Will return a div of the provided aspect ratio that always has the same size, to avoid content layout shift. Will then put the image inside of the container once it loads.
- * Also makes a responsive image without you having to do anything: uses shopify's CDN which picks the best image format to resize the image to the size of the first image container in a certain listing.
- * This works because the listings (recs, search, plp) all are wrapped in `<ListingProvider>`'s. This means all components rendered within can use `useListing` to get an object to write data to that will be the same for all components rendered within that listing. The first instance of this component rendered within a listing puts a ResizeObserver on its div and the other components then just set the sizes attribute of their image to that.
- * @property src image source
- * @property aspectRatio aspect ratio of the image
- * @property class extra class to add to the container
- * @property alt alt text for the image
- * @property autoAdjustAspectRatio whether to automatically adjust the aspect ratio of the image to the majority of the aspect ratios of loaded images in the current listing provider. Defaults to false. Can be overriden with css variable --image-aspect-ratio
- * @property imgProps props to pass to ShopifyResponsiveImg to add to the <img> element
- */
-export function ShopifyContainedImage(props: {
-  src: string;
-  aspectRatio: number | string;
-  autoAdjustAspectRatio?: boolean;
-  class?: string;
-  imgProps?: Omit<Parameters<typeof ShopifyResponsiveImg>[0], "size" | "src">;
-}): HTMLDivElement;
-/**
- * Hacks ShopifyContainedImage work even for non-shopify image urls by forcing the format to be WebP
- */
-export function ModernResponsiveContainedImage(props: {
-  merchant_: string;
-} & Parameters<typeof ShopifyContainedImage>[0]): import("solid-js").JSX.Element;
-/** @jsxImportSource solid-js */
-export function GenericSliderArrowButton(props?: {
-  width_?: number;
-  height_?: number;
-}): SVGElement;
-export function SlidableItems({
-  children,
-  slider_ref_,
-  faded_opacity_,
-  mutation_plugins_,
-  disable_fading_,
-  arrow_width_,
-  arrow_height_,
-  snapAlign_,
-  fadingThreshold_
-}: {
-  children?: JSX.Element;
-  slider_ref_?: (slider: Amazing_Slider) => any;
-  faded_opacity_?: number;
-  disable_fading_?: boolean;
-  snapAlign_?: "start" | "end" | "center";
-  fadingThreshold_?: number;
-  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
-  arrow_width_?: number;
-  arrow_height_?: number;
-}): JSX.Element;
-export type SolidLayoutOptions = {
-  cols_at_size: ColsAtSize;
-  grid_spacing: string;
-  rows: {
-    start_rows?: number;
-    rows_per_click?: number;
-    currently_visible?: Signal<number>;
-    max_rows?: number;
-    button?: JSX.Element;
-    view_less_button?: JSX.Element;
-  } | "all";
-  layout: "slider" | "grid";
-  disable_partial_rows?: boolean;
-  override_vertical_spacing?: string;
-  children: JSX.Element;
-  element_attributes: Omit<JSX.HTMLAttributes<HTMLDivElement>, "classList">;
-};
-/**
- * SolidLayout: SolidJS adaption of Layout. Calculates CSS for a grid or slider with a certain spacing and certain number of columns at certain screen sizes, including a view more button. All properties are reactive.
- * @property       rows                  if set to 'all': Just generate grid styling without any viewing/hiding functionality. If an object: start_rows is the number of rows at the beginning. rows_per_click is the amount of rows to view on each view more button click. button is the view more button to display. currently_visible is a signal that you can use to get and set the number of currently viewed rows
- * @property       cols_at_size          An array with sub arrays looking like this: `[n_cols, min_width_media_query, max_width_media_query, grid_spacing_for_size]`, everything after `[n_cols, min_width]` is optional. falsey value for `min_width = no min_width`
- * @property       grid_spacing  spacing to use if none is specified for the specific size in `cols_at_size`
- * @property       disable_partial_rows  If set to `true`, will not let user press "show more" if next row is a partial row. Example of partial row: `cols_at_size` says we should have 4 recs in the next row, but we only have 2 left, so the row just gets 2 instead of 4, meaning it doesn't "fill out".
- * @property override_vertical_spacing by default, the grid_spacing is used both horizontally and vertically, with this you can specify a separate spacing
- * @return An accessor containing a CSS string
- */
-export function SolidLayout(props: SolidLayoutOptions): JSX.Element;
 export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
 interface Styles {
   [selector: string]: JSX.CSSProperties;
@@ -802,10 +824,6 @@ declare class PseudoRouter {
   };
   constructor(on_navigation: OnNavigation, listing_query_state_key?: string);
 }
-/**
- * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
- */
-export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
 /**
  * First generation (classic) search modal - the solid component that gets added to <body> when the search modal is opened
  */
@@ -993,10 +1011,6 @@ export type ContentBlock = {
  * ```
  */
 export type ContentBlocksByRow = (undefined | ContentBlock)[];
-/**
- * Returns accessor with the size of the provided element, including padding and border (I think)
- */
-export function make_accurate_width_accessor(what_to_watch: HTMLElement): import("solid-js").Accessor<number | undefined>;
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
  */
@@ -1174,6 +1188,10 @@ export const embedded_num_products: ({
   middle_elements_: Accessor<JSX.Element>;
   on_filters_constructed_: () => void;
 };
+/**
+ * Gets available listings for a given merchant, market and locale
+ */
+export function get_listings(merchant: string, market: string, locale: string): Promise<import("@depict-ai/types/api/ListListingsResponseItem").ListListingsResponseItem1[]>;
 type GeneralCategoryListingOptions = {
   market: string;
   merchant: string;
@@ -1236,37 +1254,6 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
     ...props_on_class
   }: DepictCategoryConstructorOptions<InputDisplay, OutputDisplay>);
 }
-/**
- * This is the CategoryPage component visible outside - exported from @depict-ai/ui.
- * It wraps the internal, pure CategoryPage component and connects it to the DepictCategory instance and other global state such as the history or page URL.
- * It is wrapped once again in the js-ui and react-ui packages which exports the final, most simplified interface.
- */
-export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: {
-  depict_category: DepictCategory<OriginalDisplay, OutputDisplay>;
-  grid_spacing: SDKGridSpacing;
-  cols_at_size: SDKColsAtSize;
-  product_card_template: ProductCardTemplate<[OutputDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>;
-  show_quicklinks?: boolean;
-  show_breadcrumbs?: boolean;
-  category_title: typeof CategoryTitle | typeof embedded_num_products;
-  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;
-export function BreadCrumbs<T extends Display>({
-  depict_category
-}: {
-  depict_category: DepictCategory<T>;
-}): HTMLDivElement;
-export function QuickLinks<T extends Display>({
-  depict_category
-}: {
-  depict_category: DepictCategory<T>;
-}): HTMLDivElement;
-/**
- * Gets available listings for a given merchant, market and locale
- */
-export function get_listings(merchant: string, market: string, locale: string): Promise<import("@depict-ai/types/api/ListListingsResponseItem").ListListingsResponseItem1[]>;
 /** A function that renders category suggestion cards. Set to false to disable category suggestions. */
 export type RenderCategorySuggestion = (category_suggestion: Accessor<ListingSuggestionAfterURLCreator>, index: number) => JSX.Element;
 type GeneralConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
@@ -1392,7 +1379,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;
@@ -1443,4 +1430,31 @@ interface SearchFieldParams {
  * Returns a SearchField that will open a modal aligned to it when clicked.
  */
 export function SearchField(props: SearchFieldParams): HTMLDivElement[];
+export function BreadCrumbs<T extends Display>({
+  depict_category
+}: {
+  depict_category: DepictCategory<T>;
+}): HTMLDivElement;
+export function QuickLinks<T extends Display>({
+  depict_category
+}: {
+  depict_category: DepictCategory<T>;
+}): HTMLDivElement;
+/**
+ * This is the CategoryPage component visible outside - exported from @depict-ai/ui.
+ * It wraps the internal, pure CategoryPage component and connects it to the DepictCategory instance and other global state such as the history or page URL.
+ * It is wrapped once again in the js-ui and react-ui packages which exports the final, most simplified interface.
+ */
+export function CategoryPage<OriginalDisplay extends Display, OutputDisplay extends ModernDisplay | never>(props: {
+  depict_category: DepictCategory<OriginalDisplay, OutputDisplay>;
+  grid_spacing: SDKGridSpacing;
+  cols_at_size: SDKColsAtSize;
+  product_card_template: ProductCardTemplate<[OutputDisplay] extends [never] ? OriginalDisplay : ModernDisplayWithPageUrl<OutputDisplay>>;
+  show_quicklinks?: boolean;
+  show_breadcrumbs?: boolean;
+  category_title: typeof CategoryTitle | typeof embedded_num_products;
+  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/latest").Node_Array;
 export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";