@depict-ai/ui 2.1.23 → 3.0.1

package/ES10/index.d.ts

@@ -1,17 +1,159 @@
-import { JSX, Accessor, Signal, Setter } from "solid-js";
-import { report, Display, Amazing_Slider, ColsAtSize, Elem, ModernDisplay, Node_Array } from "@depict-ai/utilishared/ES10";
-import { SearchFilter, SortModel, SearchRequestV2 } from "@depict-ai/types/api/SearchRequestV2";
+import { JSX, Signal, Accessor, Setter } from "solid-js";
+import { Amazing_Slider, Node_Array, Display, report, ColsAtSize, Elem, ModernDisplay } from "@depict-ai/utilishared/ES10";
+import { SearchFilter, SortModel, SearchRequestV3 } from "@depict-ai/types/api/SearchRequestV3";
 import { SearchFilter as _SearchFilter1, ContentLink, SearchResponse } from "@depict-ai/types/api/SearchResponse";
-import { BaseCategoryDisplay, ProductListingResponseV2 } from "@depict-ai/types/api/ProductListingResponseV2";
+import { CategorySuggestion } from "@depict-ai/types/api/SearchSuggestionsResponseV3";
+import { Breadcrumb, Quicklink, GetListingResponse } from "@depict-ai/types/api/GetListingResponse";
 import { LegacyCategorySuggestion, SearchSuggestionsResponse } from "@depict-ai/types/api/SearchSuggestionsResponse";
-import { BaseSearchRequestV2 } from "@depict-ai/types/api/BaseSearchRequestV2";
-import { SearchSuggestionsRequestV2 } from "@depict-ai/types/api/SearchSuggestionsRequestV2";
-import { ProductListingRequestV2 } from "@depict-ai/types/api/ProductListingRequestV2";
-export const version = "2.1.23";
+import { ProductListingResponseV3 } from "@depict-ai/types/api/ProductListingResponseV3";
+import { SearchSuggestionsRequestV3 } from "@depict-ai/types/api/SearchSuggestionsRequestV3";
+import { ProductListingRequestV3 } from "@depict-ai/types/api/ProductListingRequestV3";
+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 = "3.0.1";
+/** @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_
+}: {
+  children?: JSX.Element;
+  slider_ref_?: (slider: Amazing_Slider) => any;
+  faded_opacity_?: number;
+  disable_fading_?: boolean;
+  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
+  arrow_width_?: number;
+  arrow_height_?: number;
+}): HTMLDivElement;
 /**
- * Use `javascript_media_query` but return a reactive accessor instead of taking a callback function
+ * Renders a set of tabs
+ * Will ignore any children that's not a <Tab />
+ * Will cache children after the first visit, so they don't get re-created when closing and re-opening a tab
  */
-export function media_query_to_accessor(media_query: string): import("solid-js").Accessor<boolean>;
+export function Tabs(props: Parameters<typeof ActualTabs>[0]): JSX.Element;
+declare function ActualTabs(props: {
+  children: JSX.Element;
+  wrapTabBar?: (navElement: JSX.Element) => JSX.Element;
+  slidable?: boolean;
+  /**
+   * Component to use for creating an anchor (<a> tag) for the tab bar
+   */
+  AnchorComponent: (props: JSX.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    children: JSX.Element;
+  }) => JSX.Element;
+}): JSX.Element;
+/**
+ * Renders a tab
+ * Provide a custom id if you want to link to it from outside the tabs (i.e. provide "hello" and then linking to "#hello" focuses the tab). The id has to be unique.
+ */
+export function Tab(props: {
+  label: JSX.Element;
+  children: JSX.Element;
+  onSelected?: VoidFunction;
+  id?: string;
+}): undefined;
+/**
+ * Basically allows you to use SearchModal
+ * So the idea is to have a modal. It should either be rendered and exist, in which case it is in the foreground and open, or it's completely gone. This makes things easier.
+ * @param search_modal a function which returns an array of nodes that get appended into <body>. This function will run in its own solid-js root which will call onCleanup and cleanup all reactive things inside it when the modal is closed. This function will get the arguments passed to open_modal_ and the modal_fn_opts merged together, along with register_closing_animation_ where an async function that resolves once the animation is finished can be provided to animate the closing of the modal
+ * @param modal_fn_opts static options for the modal that won't change on a per-opening basis
+ * @param parent override the parent element to append the modal to. Defaults to <body>
+ @returns a function to open and close the modal. When calling the open_modal_ function additional parameters can be passed to the modal
+ */
+export function general_modal_abstraction<StaticOptions extends {
+  [key: string]: any;
+}, ExtraOptionsProvidedOnOpen extends {
+  [key: string]: any;
+}>(search_modal: (options: StaticOptions & ExtraOptionsProvidedOnOpen & {
+  close_modal_: VoidFunction;
+  open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
+  register_closing_animation_: (animation: () => Promise<any>) => void;
+}) => Node_Array, modal_fn_opts: StaticOptions, parent?: HTMLElement | ShadowRoot): Promise<{
+  open_modal_: (extra_options_for_modal?: any, on_dispose?: VoidFunction | undefined) => Promise<void | undefined>;
+  close_modal_: () => void | undefined;
+}>;
+export type OnNavigation = ((options: {
+  is_replace: boolean;
+  new_url: URL;
+  scroll: boolean;
+}) => void) | "hard_navigation";
+/**
+ * Not a router that does our custom routing on non-spas and otherwise plugs into other routers and generalises their functionality
+ */
+declare class PseudoRouter {
+  #private;
+  /**
+   * Function that will be called when we want to navigate, or a string saying it's not an SPA. You can change this OTG
+   */
+  on_navigation_: OnNavigation;
+  /**
+   * We store listing_id in history.state and do operate on this both here and in js-ui, this is the key to be used which js-ui provides
+   */
+  listing_id_state_key: string | undefined;
+  navigate_: {
+    /**
+     * Call this if you *just* want to replace the state object in history.state
+     */
+    replace_state_: (new_state: {
+      [key: string]: any;
+    }) => void;
+    /**
+     * Call this to change the URL
+     * @param new_url_ new URL to go to
+     * @param event_ event if you have this in a click handler, will not do anything on cmd/ctrl or non-left click then
+     * @param force_spa_navigation_ if you want to force SPA navigation even if on_navigation_ is set to "hard_navigation". You should only set this to true for inter-SDK-page navigations
+     * @param is_replace_ if you want to replace the current URL in history instead of pushing a new one
+     * @param listing_id_ If you are navigating to a category and know the listing_id of, please provide it. This is for making a better devEx in js-ui
+     */
+    go_to_: (args_0: {
+      new_url_: string | URL;
+      event_?: MouseEvent | undefined;
+      force_spa_navigation_?: boolean | undefined;
+      is_replace_: boolean;
+      listing_id_?: string | undefined;
+      scroll?: boolean | undefined;
+    }) => Promise<void | undefined>;
+  };
+  constructor(on_navigation: OnNavigation, listing_id_state_key?: string);
+}
+/**
+ * Makes signals out of values in history.state so that you can use history state as an intuitive storage of application state.
+ * @param params_to_default_value an object of keys with a serialisable default value.
+ * @param router_ router used to replace state
+ * @returns An object with the same keys as provided with the value being a Signal containing the default value. When the signal is set, history.replaceState is called and the key/value is put into history.state. If something else pushes a new state or the state is poped the signal value will update to always be in-line with the value of history.state.
+ */
+export function history_dot_state_to_state<Param extends string, DefaultValue>(params_to_default_value: Record<Param, DefaultValue>, router_: PseudoRouter): Record<Param, Signal<any>>;
+export type SDKGridSpacing = string | {
+  horizontal: string;
+  vertical: string;
+};
+export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
+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>;
+/**
+ * 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);
@@ -23,6 +165,7 @@ export function SentryErrorBoundary(props: {
   on_error_?: (retry: VoidFunction) => JSX.Element | void;
   class_list_?: string[];
 }): JSX.Element;
+export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
 /**
  * Base placeholder component used by ImagePlaceholder and TextPlaceholder
  */
@@ -51,6 +194,115 @@ type ImagePlaceholderImageOptions = {
  * @property style extra styles to add to the placeholder
  */
 export function ImagePlaceholder(props: ImagePlaceholderBaseOptions & (ImagePlaceholderBlockOptions | ImagePlaceholderImageOptions)): 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;
+/**
+ * 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 const CategoryTitle: ({
+  category_title_,
+  product_count_
+}: {
+  category_title_: Accessor<string | undefined>;
+  product_count_: JSX.Element;
+}) => JSX.Element;
+export const defaultColsAtSize: SDKColsAtSize;
+export const defaultGridSpacing = "2%";
+export const defaultCategoryTitlePlugin: ({
+  category_title_,
+  product_count_
+}: {
+  category_title_: import("solid-js").Accessor<string | undefined>;
+  product_count_: import("solid-js").JSX.Element;
+}) => import("solid-js").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;
+/**
+ * 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;
+/**
+ * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
+ * If no merchant or market is specified, the product cards won't get any merchant and market in their second argument.
+ */
+export function RecommendationGrid<T extends Display>(props: {
+  grid_spacing: SDKGridSpacing;
+  cols_at_size: SDKColsAtSize;
+  title?: JSX.Element;
+  recommendations: Promise<T[]>;
+  view_more_button?: {
+    text: string;
+    start_rows?: number;
+    rows_per_click?: number;
+  };
+  max_rows?: number;
+  product_card_template: ProductCardTemplate<T>;
+}): HTMLDivElement;
+type ShopTheLookOpenModalOptions<T extends Display> = {
+  onNavigation: OnNavigation;
+  productId: string;
+  merchant: string;
+  market: string;
+  locale: string;
+  imageAspectRatio: number;
+  productCardTemplate: ProductCardTemplate<T>;
+};
+type ShopTheLookButtonProps<T extends Display> = ShopTheLookOpenModalOptions<T> & {
+  buttonAttributes?: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+};
+export function ShopTheLookButton<T extends Display>(props: ShopTheLookButtonProps<T>): import("solid-js").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>;
 /**
  * The interface for a content block.
  * Please make sure that you don't have content blocks overlap as that will cause undefined behavior.
@@ -79,37 +331,6 @@ export type ContentBlock = {
  * ```
  */
 export type ContentBlocksByRow = (undefined | ContentBlock)[];
-export type SDKGridSpacing = string | {
-  horizontal: string;
-  vertical: string;
-};
-export type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
-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;
-  merchant: string;
-  market: string;
-}
-export type ProductCardTemplate<T extends Display> = (display: T | null, info?: SDKRenderingInfo) => JSX.Element | Promise<JSX.Element>;
-type WithoutMerchant<T> = T extends {
-  merchant: string;
-} ? Omit<T, "merchant"> : T;
-type WithoutMarket<T> = T extends {
-  market: string;
-} ? Omit<T, "market"> : T;
-export type ProductCardTemplateWithoutMerchantAndMarket<T extends Display> = (display: Parameters<ProductCardTemplate<T>>[0], info?: WithoutMerchant<WithoutMarket<SDKRenderingInfo>>) => ReturnType<ProductCardTemplate<T>>;
-/**
- * Will be sent to backend to indicate whether the query_id_ is for a collection or category.
- * Backend defaults to category if not specified.
- */
-export type ListingType = "collection" | "category";
-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>;
 /**
  * Function that encodes a filter object into query parameters and sets them on the given URLSearchParams object.
  */
@@ -134,17 +355,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;
-/**
- * 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;
 /** @jsxImportSource solid-js */
 /**
  * ImageContainer for using the padding hack to set the aspect ratio of an image
@@ -191,112 +401,20 @@ export function ShopifyContainedImage(props: {
   class?: string;
   alt?: string;
 }): HTMLDivElement;
-/** @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_
-}: {
-  children?: JSX.Element;
-  slider_ref_?: (slider: Amazing_Slider) => any;
-  faded_opacity_?: number;
-  disable_fading_?: boolean;
-  mutation_plugins_?: ((this: Amazing_Slider, mutations: IntersectionObserverEntry[], intersecting_items: Record<number, IntersectionObserverEntry>) => unknown)[];
-  arrow_width_?: number;
-  arrow_height_?: number;
-}): HTMLDivElement;
 /**
  * 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>;
-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;
-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;
-type RecommendationSliderBaseProps<T extends Display> = {
-  grid_spacing: SDKGridSpacing;
-  cols_at_size: SDKColsAtSize;
-  recommendations: Promise<T[]>;
-  title?: JSX.Element;
-};
 /**
  * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
- * If no merchant or market is specified, the product cards won't get any merchant and market in their second argument.
  */
 export function RecommendationSlider<T extends Display>(props: {
-  product_card_template: ProductCardTemplate<T>;
-  merchant: string;
-  market: string;
-} & RecommendationSliderBaseProps<T>): HTMLDivElement;
-export function RecommendationSlider<T extends Display>(props: {
-  product_card_template: ProductCardTemplateWithoutMerchantAndMarket<T>;
-  merchant?: never;
-  market?: never;
-} & RecommendationSliderBaseProps<T>): HTMLDivElement;
-type RecommendationGridBaseProps<T extends Display> = {
   grid_spacing: SDKGridSpacing;
   cols_at_size: SDKColsAtSize;
-  title?: JSX.Element;
   recommendations: Promise<T[]>;
-  view_more_button?: {
-    text: string;
-    start_rows?: number;
-    rows_per_click?: number;
-  };
-  max_rows?: number;
-};
-/**
- * Render a grid with provided recommendations. displayTransformers will not be applied for this since you yourself provide the displays. Options are reactive.
- * If no merchant or market is specified, the product cards won't get any merchant and market in their second argument.
- */
-export function RecommendationGrid<T extends Display>(props: {
+  title?: JSX.Element;
   product_card_template: ProductCardTemplate<T>;
-  merchant: string;
-  market: string;
-} & RecommendationGridBaseProps<T>): HTMLDivElement;
-export function RecommendationGrid<T extends Display>(props: {
-  product_card_template: ProductCardTemplateWithoutMerchantAndMarket<T>;
-  merchant?: never;
-  market?: never;
-} & RecommendationGridBaseProps<T>): HTMLDivElement;
+}): HTMLDivElement;
 export function ExpandingDetails(props: {
   details_: HTMLDetailsElement;
   summary_: HTMLElement;
@@ -324,6 +442,7 @@ export function SolidFormatPrice(props: {
  * PLP internationalisation shared between search and category listing
  */
 type plp_shared_i18n = {
+  backend_locale_: string;
   scroll_to_top_: string;
   back_: string;
   open_sorting_: string;
@@ -414,7 +533,6 @@ export function show_toast({
 } & JSX.HTMLAttributes<HTMLDivElement>): {
   close_toast_: VoidFunction;
 };
-export function CrossIcon(props?: JSX.SvgSVGAttributes<SVGSVGElement>): SVGElement;
 export function SelectedFilters({
   number_of_rendered_selected_filters_items_,
   i18n_,
@@ -436,20 +554,6 @@ export function SelectedFilters({
   selected_filters_: Signal<FilterWithData[]>;
   local_filter_cache_: Signal<SearchFilter[]>;
 }): HTMLDivElement;
-/**
- * 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;
 interface FilterBodyProps {
   available_filters_: Accessor<_SearchFilter1[] | undefined>;
   expanded_filters_: Signal<{
@@ -500,7 +604,7 @@ export type DisplayTransformers<InputDisplay extends ModernDisplay, OutputDispla
     displays: InputDisplay[];
   }) => CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
   categories?: (options: DisplayTransformerAlwaysThereData & {
-    data: (BaseCategoryDisplay | LegacyCategorySuggestion)[];
+    data: (Breadcrumb | Quicklink | CategorySuggestion)[];
   }) => CanBePromiseWrapped<{
     page_url: string;
   }[]>;
@@ -530,7 +634,7 @@ type PageURLCreatorAlwaysThereData = {
 };
 type PageURLCreatorCategoryData = {
   type: "categories";
-  data: (BaseCategoryDisplay | LegacyCategorySuggestion)[];
+  data: (Breadcrumb | Quicklink | CategorySuggestion)[];
 };
 type PageURLCreatorProductData<T extends ModernDisplay> = {
   displays: T[];
@@ -549,31 +653,6 @@ export type PageURLCreator<InputDisplay extends ModernDisplay, OutputDisplay ext
 }[]> : CanBePromiseWrapped<{
   page_url: string;
 }[]> | CanBePromiseWrapped<OutputDisplay extends ModernDisplay ? ModernDisplayWithPageUrl<OutputDisplay>[] : never>;
-/**
- * Basically allows you to use SearchModal
- * So the idea is to have a modal. It should either be rendered and exist, in which case it is in the foreground and open, or it's completely gone. This makes things easier.
- * @param search_modal a function which returns an array of nodes that get appended into <body>. This function will run in its own solid-js root which will call onCleanup and cleanup all reactive things inside it when the modal is closed. This function will get the arguments passed to open_modal_ and the modal_fn_opts merged together, along with register_closing_animation_ where an async function that resolves once the animation is finished can be provided to animate the closing of the modal
- * @param modal_fn_opts static options for the modal that won't change on a per-opening basis
- * @param parent override the parent element to append the modal to. Defaults to <body>
- @returns a function to open and close the modal. When calling the open_modal_ function additional parameters can be passed to the modal
- */
-export function general_modal_abstraction<StaticOptions extends {
-  [key: string]: any;
-}, ExtraOptionsProvidedOnOpen extends {
-  [key: string]: any;
-}>(search_modal: (options: StaticOptions & ExtraOptionsProvidedOnOpen & {
-  close_modal_: VoidFunction;
-  open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
-  register_closing_animation_: (animation: () => Promise<any>) => void;
-}) => Node_Array, modal_fn_opts: StaticOptions, parent?: HTMLElement | ShadowRoot): Promise<{
-  open_modal_: (extra_options_for_modal?: ExtraOptionsProvidedOnOpen, on_dispose?: VoidFunction) => void;
-  close_modal_: () => void;
-}>;
-export type OnNavigation = ((options: {
-  is_replace: boolean;
-  new_url: URL;
-  scroll: boolean;
-}) => void) | "hard_navigation";
 export type ExclusiveId = {
   categoryId: string;
   productId?: undefined;
@@ -595,7 +674,7 @@ type RecsAPIWrapperOptions = {
   type: string;
   merchant: string;
   market: string;
-  userId?: string;
+  locale: string;
   sessionId?: string;
   headers?: HeadersInit;
   metadata?: Record<string, any>;
@@ -606,12 +685,12 @@ type RecsAPIWrapperOptions = {
  *
  * @param merchant The name of the merchant (e.g. "acme")
  * @param market The market to fetch recs for. Depict will provide this to you. (Example: "sv" or "sv-se".)
+ * @param locale The locale to fetch for.
  * @param type The type of the recommendations, e.g. `front_page`, `after_basket, `related`, etc. Ask Depict for this.
  * @param categoryId When requesting recommendations for a category page, pass the id of the category page as `categoryId`.
  * @param productId When requesting recommendations for a single product, e.g. on a product detail page, pass the id of the product as `productId`.
  * @param productIds When requesting recommendations that should take multiple products into account, i.e. the contents of the basket/cart, pass an array of product ids as `productIds`
- * @param userId Optional unique identifier of a logged-in user. Should be persistent across devices and sessions.
- * @param sessionId Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
+ * @param sessionId Optional unique identifier of the current session. Only necessary when performing server side requests to Depict.
  * @param metadata Custom metadata to be sent with each request to the Depict API. Only necessary if specifically instructed by Depict.
  * @param headers Optional headers to send to the Depict API. This could be authentication for example. 99% of integrations can leave this unset.
  * When no id is provided (none out of `categoryId`, `productId` and `productIds`) general recommendations will be fetched. This is for, for example, the frontpage where generally popular products get returned.
@@ -637,12 +716,7 @@ type RecsAPIWrapperOptions = {
  * ```
  * @return This function is guaranteed to return an array of Displays. If anything fails, you will get an empty array.
  */
-export function fetchDepictRecommendations<T extends Display = Display>({
-  merchant,
-  market,
-  headers,
-  ...fetch_recs_options
-}: RecsAPIWrapperOptions): Promise<T[]>;
+export function fetchDepictRecommendations<T extends ModernDisplay = ModernDisplay>(options: RecsAPIWrapperOptions): Promise<T[]>;
 export type InstantCard<T extends Display> = (display: T, context: {
   index: number;
   i18n: search_i18n;
@@ -658,21 +732,25 @@ type AddPageUrlToDisplay<T extends any[]> = (T[number] & {
   page_url: string;
 })[];
 type SearchResponseAfterURLCreator = { [K in keyof SearchResponse]: K extends "displays" ? AddPageUrlToDisplay<SearchResponse[K]> : K extends "filters" ? AddActualFieldToFilters<SearchResponse[K]> : SearchResponse[K] };
-type BaseCategoryDisplayAfterURLCreator = BaseCategoryDisplay & {
+type QuicklinksOrBreadCrumbsWithPageURL<T extends Breadcrumb | Quicklink> = T & {
   page_url: string;
 };
-type ReplaceBaseCategoryDisplay<T> = T extends BaseCategoryDisplay ? BaseCategoryDisplayAfterURLCreator : T extends BaseCategoryDisplay[] ? BaseCategoryDisplayAfterURLCreator[] : T;
 type _AddPageUrlToDisplay1<T extends any[]> = (T[number] & {
   page_url: string;
 })[];
-type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponseV2]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponseV2[K]> : K extends "breadcrumb" | "quick_links" ? ReplaceBaseCategoryDisplay<ProductListingResponseV2[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV2[K]> : ProductListingResponseV2[K] };
+type ProductListingResponseAfterURLCreator = { [K in keyof ProductListingResponseV3]: K extends "displays" ? _AddPageUrlToDisplay1<ProductListingResponseV3[K]> : K extends "filters" ? AddActualFieldToFilters<ProductListingResponseV3[K]> : ProductListingResponseV3[K] };
+type GetListingResponseAfterURLCreator = { [K in keyof GetListingResponse]: K extends "breadcrumbs" ? QuicklinksOrBreadCrumbsWithPageURL<Breadcrumb>[] : K extends "quick_links" ? QuicklinksOrBreadCrumbsWithPageURL<Quicklink>[] : GetListingResponse[K] };
 type DepictAPIConstructorOptions<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = {
   get_metadata?: () => Promise<{
     [k: string]: string;
   } | undefined>;
-  get_user_id?: () => string | undefined;
   get_session_id?: () => string | undefined;
 } & SomethingTakingAPageURLCreatorOrDisplayTransformers<InputDisplay, OutputDisplay>;
+interface GetListingOptions extends GetListingRequest {
+  listing_id: string;
+  session_id?: string;
+  market: string;
+}
 /**
  * Class that handles all communication done in PLP code with the Depict API. (Notably not for recommendations currently).
  * It handles caching, retries and errors and is the only place that should be making requests to the Depict API.
@@ -682,33 +760,26 @@ export class DepictAPI<InputDisplay extends Display, OutputDisplay extends Moder
   page_url_creator: PageURLCreator<ModernDisplay, OutputDisplay> | undefined;
   display_transformers: DisplayTransformers<ModernDisplay, OutputDisplay> | undefined;
   constructor(options: DepictAPIConstructorOptions<InputDisplay, OutputDisplay>);
-  suggest(input_req: SearchSuggestionsRequestV2): Promise<SearchSuggestionsResponseAfterURLCreator & {
+  suggest(input_req: SearchSuggestionsRequestV3): Promise<SearchSuggestionsResponseAfterURLCreator & {
+    failed?: true;
+  }>;
+  query(input_req: SearchRequestV3): Promise<SearchResponseAfterURLCreator & {
     failed?: true;
   }>;
-  query(input_req: SearchRequestV2): Promise<SearchResponseAfterURLCreator & {
+  get_listing(input_req: GetListingOptions): Promise<GetListingResponseAfterURLCreator & {
     failed?: true;
   }>;
-  list(input_req: ProductListingRequestV2): Promise<ProductListingResponseAfterURLCreator & {
+  get_listing_products(input_req: ProductListingRequestV3 & {
+    listing_id: string;
+  }): Promise<ProductListingResponseAfterURLCreator & {
     failed?: true;
   }>;
-  get_recommended<T extends Display>(input_req: BaseSearchRequestV2): Promise<{
+  get_recommended<T extends Display>(input_req: BaseSearchRequestV3): Promise<{
     displays: T[];
   } & {
     failed?: true | undefined;
   }>;
 }
-/**
- * Disables scrolling until the solidjs reactive scoped is disposed (onCleanup)
- * @returns A cleanup function to manually re-enable scrolling.
- */
-export function disable_scrolling(): () => void;
-export const CategoryTitle: ({
-  category_title_,
-  product_count_
-}: {
-  category_title_: Accessor<string | undefined>;
-  product_count_: JSX.Element;
-}) => JSX.Element;
 /**
  * Embeds number of products between sort and filter buttons on mobile if possible, only supported for category pages right now. Pass it as category_title_ to Category.
  * Note: this will add an invisible element as first element in depict-search-page which will confuse the flex-gap SCSS mixin a bit so you'll get some extra spacing at the beginning of the search page
@@ -742,7 +813,7 @@ type GeneralCategoryListingOptions = {
   localization: category_i18n;
   unique_instance_key_for_state?: string;
   on_navigation?: OnNavigation;
-  query_id_state_key?: string;
+  listing_id_state_key?: string;
 };
 type CategoryConstructorOptionsWithApi<InputDisplay extends Display, OutputDisplay extends ModernDisplay | never> = GeneralCategoryListingOptions & {
   api: DepictAPI<InputDisplay, OutputDisplay>;
@@ -758,18 +829,16 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
   #private;
   get localization(): category_i18n;
   set localization(locale_obj: category_i18n);
-  get category_id(): string;
-  set category_id(id: string);
+  get listing_id(): string;
+  set listing_id(id: string);
   get merchant(): string;
   set merchant(merchant: string);
   get market(): string;
   set market(market: string);
-  get listing_type(): ListingType | undefined;
-  set listing_type(listing_type: ListingType | undefined);
   get meta_title_suffix(): string | undefined;
   set meta_title_suffix(new_suffix: string | undefined);
-  get disable_override_query_id(): boolean | undefined;
-  set disable_override_query_id(new_value: boolean | undefined);
+  get disable_override_listing_id(): boolean | undefined;
+  set disable_override_listing_id(new_value: boolean | undefined);
   get on_navigation(): OnNavigation;
   set on_navigation(new_function: OnNavigation);
   constructor({
@@ -778,7 +847,7 @@ export class DepictCategory<InputDisplay extends Display, OutputDisplay extends
     page_url_creator,
     display_transformers,
     unique_instance_key_for_state,
-    query_id_state_key,
+    listing_id_state_key,
     ...props_on_class
   }: DepictCategoryConstructorOptions<InputDisplay, OutputDisplay>);
 }
@@ -795,26 +864,23 @@ export function CategoryPage<OriginalDisplay extends Display, OutputDisplay exte
   show_quicklinks?: boolean;
   show_breadcrumbs?: boolean;
   category_title: typeof CategoryTitle | typeof embedded_num_products;
-  on_query_id_change?: (new_query_id?: string | undefined, old_query_id?: string | undefined) => void;
+  on_listing_id_change?: (new_listing_id?: string | undefined, old_listing_id?: string | undefined) => void;
   content_blocks_by_row?: ContentBlocksByRow;
 }): import("@depict-ai/utilishared").Node_Array;
 export function BreadCrumbs<T extends Display>({
   depict_category
 }: {
   depict_category: DepictCategory<T>;
-}): HTMLElement;
+}): JSX.Element;
 export function QuickLinks<T extends Display>({
   depict_category
 }: {
   depict_category: DepictCategory<T>;
-}): HTMLElement;
+}): JSX.Element;
 /**
- * Gets available categories/collections (query_ids for the product-listing endpoint) for a merchant
- * @param tenant
- * @param market
- * @param type - optional, currently only setting this to "collection" will return collections instead of categories
+ * Gets available listings for a given merchant, market and locale
  */
-export function get_categories(tenant: string, market: string, type?: string): Promise<string[]>;
+export function get_listings(merchant: string, market: string, locale: string): Promise<import("@depict-ai/types/api/ListingResponseItem").ListingResponseItem1[]>;
 export function DefaultInstantCardPlaceholder(): HTMLDivElement;
 /**
  * Useful for aligning the search modal to an element, like an existing input field
@@ -902,7 +968,7 @@ export class DepictSearch<InputDisplay extends Display, OutputDisplay extends Mo
   set merchant(tenant: string);
   get market(): string;
   set market(market: string);
-  fetchSearchResults(query: string, filters?: SearchFilter[], maxResults?: number): Promise<([OutputDisplay] extends [never] ? InputDisplay : ModernDisplayWithPageUrl<OutputDisplay>)[]>;
+  fetchSearchResults(query: string, filters?: _SearchFilter2[], maxResults?: number): Promise<([OutputDisplay] extends [never] ? InputDisplay : ModernDisplayWithPageUrl<OutputDisplay>)[]>;
 }
 /**
  * This is the SearchPage component visible outside - exported from @depict-ai/ui.
@@ -943,11 +1009,7 @@ export type BaseProviderConfig<InputDisplay extends Display, PossibleTransformed
    */
   market: string;
   /**
-   * Optional unique identifier of a logged in user. Should be persistent across devices and sessions.
-   */
-  userId?: string;
-  /**
-   * Optional unique identifer of the current session. Only necessary when performing server side requests to Depict.
+   * Optional unique identifer of the user. Only necessary when performing server side requests to Depict. All Depict tooling has a fallback ID that will be used when this isn't specified, but if you make requests to Depict directly, you need to specify this everywhere.
    */
   sessionId?: string;
   /**
@@ -1040,10 +1102,10 @@ export type BaseCategoryProviderConfig = {
    */
   metaTitleSuffix?: string;
   /**
-   * The parameter `query_id=` will override the regular category id that you have configured your SDK to use. You can consider the `query_id` as an escape-hatch if you want to easily set a category id.
-   * However, if your page already sets a query_id, you can disable this behaviour by setting this property to `true` (to avoid a conflict).
+   * The parameter `listing_id=` will override the regular category id that you have configured your SDK to use. You can consider the `listing_id` as an escape-hatch if you want to easily set a listing id.
+   * However, if your page already sets a listing_id, you can disable this behaviour by setting this property to `true` (to avoid a conflict).
    */
-  disableOverrideQueryId?: boolean;
+  disableOverrideListingId?: boolean;
 };
 export interface BaseProductListingConfig {
   /**
@@ -1145,13 +1207,4 @@ export class PageReplacer extends EventTarget {
  * makes so that links to the previous page close the search instead of closing the search and reloading the page (to be used with non-spas)
  */
 export function setup_fast_leave(pr: PageReplacer): void;
-export const defaultColsAtSize: SDKColsAtSize;
-export const defaultGridSpacing = "2%";
-export const defaultCategoryTitlePlugin: ({
-  category_title_,
-  product_count_
-}: {
-  category_title_: import("solid-js").Accessor<string | undefined>;
-  product_count_: import("solid-js").JSX.Element;
-}) => import("solid-js").JSX.Element;
-export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV2";
+export type { SearchFilter } from "@depict-ai/types/api/SearchRequestV3";