@wix/editor 1.490.0 → 1.492.0

package/dist/cjs/index.js

@@ -177,35 +177,361 @@ class EventsSDKShape extends BaseSDKShape {
 }
 var index$c = new PlatformSDKShape(EventsSDKShape).withPublicMethod("addEventListener").build();
 
+class ElementsSDKShape extends BaseSDKShape {
+  async getSelection() {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    const refs = await privateAPI.components.getSelectedComponents();
+    return Promise.all(
+      refs.map(
+        (ref) => privateAPI.components.getComponent(ref)
+      )
+    );
+  }
+  async onSelectionChange(cb) {
+    const events = new EventsSDKShape(this.getApplicationContext());
+    void events.addEventListener("componentSelectionChanged", (payload) => {
+      cb(payload.components);
+    });
+  }
+}
+var index$b = new PlatformSDKShape(ElementsSDKShape).withPublicMethod("onSelectionChange").withPublicMethod("getSelection").build();
+
+class InfoSDKShape extends BaseSDKShape {
+  async getViewMode() {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    return privateAPI.info.getViewMode();
+  }
+  async getLanguageCode() {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    return privateAPI.info.getLanguageCode();
+  }
+  async getSiteDirection() {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    return privateAPI.info.getSiteDirection();
+  }
+  async siteHasCustomClasses() {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    return privateAPI.info.siteHasCustomClasses();
+  }
+  async getThemeCustomProperties(filter) {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    return privateAPI.info.getThemeCustomProperties(filter);
+  }
+  async getSiteFonts(filter) {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    return privateAPI.info.getSiteFonts(filter);
+  }
+  async getMetaSiteId() {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    return privateAPI.info.getMetaSiteId();
+  }
+}
+var index$a = new PlatformSDKShape(InfoSDKShape).withPublicMethod("getViewMode").withPublicMethod("getLanguageCode").withPublicMethod("getSiteDirection").withPublicMethod("siteHasCustomClasses").withPublicMethod("getThemeCustomProperties").withPublicMethod("getSiteFonts").withPublicMethod("getMetaSiteId").build();
+
+var WidgetShapeErrorCode = /* @__PURE__ */ ((WidgetShapeErrorCode2) => {
+  WidgetShapeErrorCode2["UndefinedCompRef"] = "UndefinedCompRef";
+  WidgetShapeErrorCode2["NotAvailableMethod"] = "NotAvailableMethod";
+  return WidgetShapeErrorCode2;
+})(WidgetShapeErrorCode || {});
+class WidgetShapeError extends publicEditorPlatformErrors.BaseError {
+  constructor(message, code) {
+    super(message, code, "Widget Error");
+  }
+}
+const createWidgetShapeError = publicEditorPlatformErrors.createErrorBuilder(WidgetShapeError);
+
+const UNDERLINE_DEFINITION = "underline";
+function getFontFamiliesFromFonts(fonts) {
+  return fonts.map((font) => parseFontString({ font }).family).filter(Boolean);
+}
+function parseFontString(fontPickerValue) {
+  const font = {
+    family: void 0,
+    size: void 0
+  };
+  if (fontPickerValue?.font) {
+    const { variableName, fallbackValue } = extractFontVar(
+      fontPickerValue.font
+    );
+    font.cssVariableName = variableName;
+    const parts = fallbackValue.match(/(?:(["']).*?\1|\S)+/g) || [];
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      switch (part) {
+        case "bold":
+          font.bold = true;
+          break;
+        case "italic":
+          font.italic = true;
+          break;
+        default:
+          if (part?.endsWith("px")) {
+            font.size = parseInt(part, 10);
+          } else if (i === parts.length - 1) {
+            font.family = part;
+          } else {
+            font.family = (font.family || "") + " " + part;
+          }
+      }
+    }
+  }
+  if (fontPickerValue?.textDecoration) {
+    font.underline = fontPickerValue.textDecoration === UNDERLINE_DEFINITION;
+  }
+  font.family = font.family?.trim().replace(/['"]+/g, "");
+  return font;
+}
+function extractFontVar(fontString) {
+  const trimmedFont = fontString.trim();
+  const match = trimmedFont.match(/var\((--[\w-]+),\s*(.+)\)/);
+  if (match) {
+    return {
+      variableName: match[1],
+      fallbackValue: match[2]?.trim() ?? ""
+    };
+  } else {
+    return {
+      variableName: void 0,
+      fallbackValue: trimmedFont
+    };
+  }
+}
+
+class WidgetScopedSDK {
+  constructor(compRef, privateAPI) {
+    this.compRef = compRef;
+    this.privateAPI = privateAPI;
+  }
+  async getProp(propName) {
+    const props = await this.privateAPI.refComponents.getProps(this.compRef);
+    return props?.[propName];
+  }
+  async setProp(propName, value) {
+    await this.privateAPI.refComponents.setProps(this.compRef, {
+      [propName]: value
+    });
+  }
+  async getDesignPreset() {
+    return this.privateAPI.designPresets.getDesignPresetName(this.compRef);
+  }
+  async setDesignPreset(designPresetName) {
+    await this.privateAPI.designPresets.setDesignPresetByName(
+      this.compRef,
+      designPresetName
+    );
+  }
+  async getNestedWidget(selector) {
+    const childCompRef = await this.privateAPI.refComponents.findComponentBySelector(
+      this.compRef,
+      selector
+    );
+    if (!childCompRef) {
+      return null;
+    }
+    return new WidgetScopedSDK(childCompRef, this.privateAPI);
+  }
+}
+class WidgetSDKShape extends BaseSDKShape {
+  async #getSelectedComponentRef() {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    const refs = await privateAPI.components.getSelectedComponents();
+    const compRef = refs[0];
+    if (!compRef) {
+      throw createWidgetShapeError(WidgetShapeErrorCode.UndefinedCompRef);
+    }
+    return compRef;
+  }
+  async setPreloadFonts(fonts) {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    const compRef = await this.#getSelectedComponentRef();
+    if (await privateAPI.refComponents.isRefComponent(compRef)) {
+      throw createWidgetShapeError(
+        WidgetShapeErrorCode.NotAvailableMethod,
+        "not available for the current component type"
+      );
+    }
+    const fontFamilies = getFontFamiliesFromFonts(fonts);
+    await privateAPI.customElement.setPreloadFonts(compRef, fontFamilies);
+  }
+  async getProp(propName) {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    const compRef = await this.#getSelectedComponentRef();
+    if (await privateAPI.refComponents.isRefComponent(compRef)) {
+      return new WidgetScopedSDK(compRef, privateAPI).getProp(propName);
+    } else {
+      return privateAPI.customElement.getAttribute(compRef, propName);
+    }
+  }
+  async setProp(propName, value) {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    const compRef = await this.#getSelectedComponentRef();
+    if (await privateAPI.refComponents.isRefComponent(compRef)) {
+      return new WidgetScopedSDK(compRef, privateAPI).setProp(propName, value);
+    } else {
+      await privateAPI.customElement.setAttribute(compRef, propName, value);
+    }
+  }
+  async getDesignPreset() {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    const compRef = await this.#getSelectedComponentRef();
+    if (!await privateAPI.refComponents.isRefComponent(compRef)) {
+      throw createWidgetShapeError(
+        WidgetShapeErrorCode.NotAvailableMethod,
+        "not available for the current component type"
+      );
+    }
+    return new WidgetScopedSDK(compRef, privateAPI).getDesignPreset();
+  }
+  async setDesignPreset(designPresetName) {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    const compRef = await this.#getSelectedComponentRef();
+    if (!await privateAPI.refComponents.isRefComponent(compRef)) {
+      throw createWidgetShapeError(
+        WidgetShapeErrorCode.NotAvailableMethod,
+        "not available for the current component type"
+      );
+    }
+    return new WidgetScopedSDK(compRef, privateAPI).setDesignPreset(
+      designPresetName
+    );
+  }
+  async getNestedWidget(selector) {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    const compRef = await this.#getSelectedComponentRef();
+    return new WidgetScopedSDK(compRef, privateAPI).getNestedWidget(selector);
+  }
+}
+const widgetShape = new PlatformSDKShape(WidgetSDKShape).withPublicMethod("getNestedWidget").withPublicMethod("setDesignPreset").withPublicMethod("getDesignPreset").withPublicMethod("setProp").withPublicMethod("getProp").withPublicMethod("setPreloadFonts");
+var index$9 = widgetShape.build();
+
+function fontValueToCSS(fontValue) {
+  return `${fontValue.cssVariableName ? `var(${fontValue.cssVariableName}, ` : ""}${fontValue.italic ? "italic " : ""}${fontValue.bold ? "bold " : ""}${fontValue.size || 16}px ${// wrap each font family with quotes
+  fontValue.family?.split(",").map((fontFamily) => `"${fontFamily.replace(/['"]+/g, "")}"`).join(",") || "serif"}${fontValue.cssVariableName ? ")" : ""}`;
+}
+function parseColorString(colorPickerValue) {
+  if (!colorPickerValue) {
+    return null;
+  }
+  const colorString = colorPickerValue;
+  const match = colorString.match(/var\((--[\w-]+),\s*(.+)\)/);
+  if (match) {
+    return {
+      cssVariableName: match[1],
+      color: match[2]
+    };
+  } else {
+    return {
+      color: colorString
+    };
+  }
+}
+function colorValueToCSS(colorValue) {
+  if (!colorValue) {
+    return "";
+  }
+  return colorValue.cssVariableName ? `var(${colorValue.cssVariableName}, ${colorValue.color})` : colorValue.color;
+}
+const fonts = {
+  transformFontInternalValue: (value) => {
+    if (value) {
+      const { theme, cssVariableName, bold, italic, underline, ...rest } = value;
+      return {
+        ...rest,
+        style: {
+          bold,
+          italic,
+          underline
+        },
+        editorKey: cssVariableName || theme || ""
+      };
+    } else {
+      return {
+        editorKey: "font_7",
+        family: "helvetica-w01-roman",
+        size: 16,
+        style: {}
+      };
+    }
+  }
+};
+class InputsSDKShape extends BaseSDKShape {
+  async selectColor(value, options) {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    let colorValue = parseColorString(value);
+    let colorResult = colorValueToCSS(colorValue);
+    await privateAPI.inputs.openColorPicker(
+      {
+        color: colorValue?.cssVariableName || colorValue?.theme || colorValue?.color
+      },
+      ({
+        color,
+        theme,
+        cssVariableTheme
+      }) => {
+        colorValue = {
+          color,
+          theme,
+          cssVariableName: cssVariableTheme
+        };
+        colorResult = colorValueToCSS(colorValue);
+        options?.onChange?.(colorResult);
+      }
+    );
+    return colorResult;
+  }
+  async selectFont(value, options) {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    const fontValue = parseFontString(value);
+    let _value = value;
+    await privateAPI.inputs.openFontPickerV2(
+      {
+        ...options,
+        panelSectionsDefinition: {
+          htmlTag: "hidden"
+        },
+        componentStyle: fonts.transformFontInternalValue(fontValue)
+      },
+      (font, accessibility) => {
+        _value = {
+          font: fontValueToCSS(font),
+          textDecoration: font.underline ? UNDERLINE_DEFINITION : void 0
+        };
+        options?.onChange?.(_value);
+      }
+    );
+    return _value;
+  }
+}
+var index$8 = new PlatformSDKShape(InputsSDKShape).withPublicMethod("selectColor").withPublicMethod("selectFont").build();
+
+class PanelsSDKShape extends BaseSDKShape {
+  async openLanguageSupportPanel() {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    return privateAPI.panels.openLanguageSupportPanel();
+  }
+  async openFontsUploadPanel() {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    return privateAPI.panels.openFontsUploadPanel();
+  }
+}
+var index$7 = new PlatformSDKShape(PanelsSDKShape).withPublicMethod("openLanguageSupportPanel").withPublicMethod("openFontsUploadPanel").build();
+
+class ModalsSDKShape extends BaseSDKShape {
+  async openDashboardModal(options) {
+    const privateAPI = await this.getPlatformPrivateAPI();
+    return privateAPI.panels.openDashboardPanel(
+      await this.getAppDefinitionId(),
+      options
+    );
+  }
+}
+var index$6 = new PlatformSDKShape(ModalsSDKShape).withPublicMethod("openDashboardModal").build();
+
 class ElementSDKShape extends BaseSDKShape {
-  constructor(overriddenApplicationContext = null, childPath = [], overrides = {}) {
+  constructor(overriddenApplicationContext = null, childPath = []) {
     super(overriddenApplicationContext);
     this.overriddenApplicationContext = overriddenApplicationContext;
     this.childPath = childPath;
-    this.type = overrides.type ?? null;
-    this.compRef = overrides.compRef;
-    this.#manifestContextIdOverride = overrides.manifestContextId;
-  }
-  type;
-  compRef;
-  #manifestContextIdOverride;
-  async getManifestContextId() {
-    return this.#manifestContextIdOverride ?? (await this.getApplicationContext()).getManifestContextId();
-  }
-  /**
-   * Reads a single data-item value by key. Equivalent to `(await getData())[prop]`.
-   * Provided for interface parity with elements.getSelection() results.
-   */
-  async getProp(prop) {
-    const data = await this.getData();
-    return data?.[prop];
-  }
-  /**
-   * Writes a single data-item value by key. Equivalent to
-   * `setData({ [prop]: value })`. Other data items are left unchanged.
-   */
-  async setProp(prop, value) {
-    await this.setData({ [prop]: value });
   }
   /**
    * Retrieves the style definitions declared in the component's manifest,
@@ -742,614 +1068,214 @@ class ElementSDKShape extends BaseSDKShape {
    * Pass `styleItemKey` to bind the picker to a manifest style item,
    * or pass manual options to configure the picker.
    *
-   * @param params - `styleItemKey` for manifest binding, or manual picker options.
-   * @returns Selected color value, or `undefined` if dismissed.
-   *
-   * @example
-   * ```ts
-   * import { element } from '@wix/editor';
-   *
-   * const color = await element.selectColor({ styleItemKey: 'backgroundColor' });
-   *
-   * const color = await element.selectColor({
-   *   initialValue: '#ff0000',
-   *   mode: ['solid', 'gradient'],
-   *   showOpacity: true,
-   *   onChange: (color) => console.log('Preview:', color),
-   *   onApply: (color) => console.log('Applied:', color),
-   * });
-   * ```
-   */
-  async selectColor(params) {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    try {
-      const manifestContextId = await this.getRequiredManifestContextId();
-      const selectedColor = await privateAPI.builderComponent.selectColor(
-        manifestContextId,
-        this.childPath,
-        params
-      );
-      return selectedColor;
-    } catch (error) {
-    }
-  }
-  /**
-   * Opens the background picker for selecting a background fill
-   * (color, gradient, or image).
-   *
-   * @param options - Background picker configuration.
-   * @returns Selected background fill value.
-   *
-   * @example
-   * ```ts
-   * import { element } from '@wix/editor';
-   *
-   * const bg = await element.selectBackground({
-   *   initialValue: { backgroundColor: '#fff', backgroundImage: '' },
-   *   onChange: (value) => console.log('Preview:', value),
-   * });
-   * ```
-   */
-  async selectBackground(options) {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const manifestContextId = await this.getRequiredManifestContextId();
-    return privateAPI.builderComponent.selectBackground(
-      manifestContextId,
-      this.childPath,
-      options
-    );
-  }
-  /**
-   * Opens the font weight picker for selecting a font weight for a specified
-   * font family.
-   *
-   * Pass manifest style item keys to bind the picker, or pass manual
-   * options to handle the selection via callbacks.
-   *
-   * @param params - Manifest style item keys, or manual picker options.
-   * @returns Selected font weight.
-   *
-   * @example
-   * ```ts
-   * import { element } from '@wix/editor';
-   *
-   * const weight = await element.selectFontWeight({
-   *   fontFamilyStyleItemKey: 'headingFontFamily',
-   *   fontWeightStyleItemKey: 'headingFontWeight',
-   * });
-   *
-   * const weight = await element.selectFontWeight({
-   *   fontFamily: { family: 'Arial', weight: '400' },
-   *   onChange: (value) => console.log('Selected weight:', value.weight),
-   * });
-   * ```
-   */
-  async selectFontWeight(params) {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const manifestContextId = await this.getRequiredManifestContextId();
-    return {
-      weight: await privateAPI.builderComponent.selectFontWeight(
-        manifestContextId,
-        this.childPath,
-        params
-      )
-    };
-  }
-  /**
-   * Opens the text theme picker for selecting a predefined text theme
-   * (a combination of font and color from the site's theme).
-   *
-   * @param params - Text theme picker configuration.
-   * @param params.target - HTML element to anchor the picker to.
-   * @param params.initialValue - Initial font and color values.
-   * @returns Selected text theme.
-   *
-   * @example
-   * ```ts
-   * import { element } from '@wix/editor';
-   *
-   * const theme = await element.selectTextTheme({
-   *   initialValue: { font: 'Heading 1', color: '#333' },
-   * });
-   * ```
-   */
-  async selectTextTheme(params) {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const manifestContextId = await this.getRequiredManifestContextId();
-    return privateAPI.builderComponent.selectTextTheme(
-      manifestContextId,
-      params
-    );
-  }
-  /**
-   * Retrieves the currently selected index in an array items data group.
-   *
-   * @param options - Specify `arrayItemsDisplayGroupKey` if the component
-   *   has multiple array item groups.
-   * @returns Index of the currently selected array item.
-   *
-   * @example
-   * ```ts
-   * import { element } from '@wix/editor';
-   *
-   * const index = await element.getArrayItemsSelectedIndex();
-   * ```
-   */
-  async getArrayItemsSelectedIndex(options) {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const manifestContextId = await this.getRequiredManifestContextId();
-    return privateAPI.builderComponent.getArrayItemsSelectedIndex(
-      manifestContextId,
-      this.childPath,
-      options
-    );
-  }
-  /**
-   * Sets the selected index in an array items data group.
-   *
-   * @param options - Object containing the `index` to select, and optionally
-   *   `arrayItemsDisplayGroupKey` if there are multiple array item groups.
-   *
-   * @example
-   * ```ts
-   * import { element } from '@wix/editor';
-   *
-   * await element.setArrayItemsSelectedIndex({ index: 2 });
-   * ```
-   */
-  async setArrayItemsSelectedIndex(options) {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const manifestContextId = await this.getRequiredManifestContextId();
-    return privateAPI.builderComponent.setArrayItemsSelectedIndex(
-      manifestContextId,
-      this.childPath,
-      options
-    );
-  }
-  /**
-   * Resets the selected index in an array items data group to the default.
-   *
-   * @param options - Specify `arrayItemsDisplayGroupKey` if the component
-   *   has multiple array item groups.
-   *
+   * @param params - `styleItemKey` for manifest binding, or manual picker options.
+   * @returns Selected color value, or `undefined` if dismissed.
+   *
    * @example
    * ```ts
    * import { element } from '@wix/editor';
    *
-   * await element.resetArrayItemsSelectedIndex();
+   * const color = await element.selectColor({ styleItemKey: 'backgroundColor' });
+   *
+   * const color = await element.selectColor({
+   *   initialValue: '#ff0000',
+   *   mode: ['solid', 'gradient'],
+   *   showOpacity: true,
+   *   onChange: (color) => console.log('Preview:', color),
+   *   onApply: (color) => console.log('Applied:', color),
+   * });
    * ```
    */
-  async resetArrayItemsSelectedIndex(options) {
+  async selectColor(params) {
     const privateAPI = await this.getPlatformPrivateAPI();
-    const manifestContextId = await this.getRequiredManifestContextId();
-    return privateAPI.builderComponent.resetArrayItemsSelectedIndex(
-      manifestContextId,
-      this.childPath,
-      options
-    );
+    try {
+      const manifestContextId = await this.getRequiredManifestContextId();
+      const selectedColor = await privateAPI.builderComponent.selectColor(
+        manifestContextId,
+        this.childPath,
+        params
+      );
+      return selectedColor;
+    } catch (error) {
+    }
   }
   /**
-   * Retrieves the BI (Business Intelligence) token for the component.
+   * Opens the background picker for selecting a background fill
+   * (color, gradient, or image).
    *
-   * @returns BI token string.
+   * @param options - Background picker configuration.
+   * @returns Selected background fill value.
    *
    * @example
    * ```ts
    * import { element } from '@wix/editor';
    *
-   * const token = await element.getBiToken();
+   * const bg = await element.selectBackground({
+   *   initialValue: { backgroundColor: '#fff', backgroundImage: '' },
+   *   onChange: (value) => console.log('Preview:', value),
+   * });
    * ```
    */
-  async getBiToken() {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const manifestContextId = await this.getRequiredManifestContextId();
-    return privateAPI.builderComponent.getBiToken(
-      manifestContextId,
-      this.childPath
-    );
-  }
-}
-var index$b = new PlatformSDKShape(ElementSDKShape).withPublicMethod("getProp").withPublicMethod("setProp").withPublicMethod("getDataDefinitions").withPublicMethod("getData").withPublicMethod("getResolvedData").withPublicMethod("setData").withPublicMethod("getStyleDefinitions").withPublicMethod("getStyles").withPublicMethod("setStyles").withPublicMethod("removeStyles").withPublicMethod("getPresetDefinitions").withPublicMethod("getAppliedPreset").withPublicMethod("applyPreset").withPublicMethod("getDisplayGroupDefinitions").withPublicMethod("getDisplayName").withPublicMethod("getState").withPublicMethod("setState").withPublicMethod("onChange").withPublicMethod("getStateDefinitions").withPublicMethod("selectFont").withPublicMethod("selectFontFamily").withPublicMethod("selectMedia").withPublicMethod("selectLink").withPublicMethod("selectColor").withPublicMethod("selectBackground").withPublicMethod("selectFontWeight").withPublicMethod("selectTextTheme").withPublicMethod("getArrayItemsSelectedIndex").withPublicMethod("setArrayItemsSelectedIndex").withPublicMethod("resetArrayItemsSelectedIndex").withPublicMethod("getBiToken").build();
-
-function createSelectedBuilderElement(element) {
-  const facade = {
-    type: element.type,
-    getProp: element.getProp.bind(element),
-    setProp: element.setProp.bind(element),
-    getDataDefinitions: element.getDataDefinitions.bind(element),
-    getData: element.getData.bind(element),
-    getResolvedData: element.getResolvedData.bind(element),
-    setData: element.setData.bind(element),
-    getStyleDefinitions: element.getStyleDefinitions.bind(element),
-    getStyles: element.getStyles.bind(element),
-    setStyles: element.setStyles.bind(element),
-    removeStyles: element.removeStyles.bind(element),
-    getPresetDefinitions: element.getPresetDefinitions.bind(element),
-    getAppliedPreset: element.getAppliedPreset.bind(element),
-    applyPreset: element.applyPreset.bind(element),
-    getDisplayGroupDefinitions: element.getDisplayGroupDefinitions.bind(element),
-    getDisplayName: element.getDisplayName.bind(element),
-    getState: element.getState.bind(element),
-    setState: element.setState.bind(element),
-    onChange: element.onChange.bind(element),
-    getStateDefinitions: element.getStateDefinitions.bind(element),
-    selectFont: element.selectFont.bind(element),
-    selectFontFamily: element.selectFontFamily.bind(element),
-    selectMedia: element.selectMedia.bind(element),
-    selectLink: element.selectLink.bind(element),
-    selectColor: element.selectColor.bind(element),
-    selectBackground: element.selectBackground.bind(element),
-    selectFontWeight: element.selectFontWeight.bind(element),
-    selectTextTheme: element.selectTextTheme.bind(element),
-    getArrayItemsSelectedIndex: element.getArrayItemsSelectedIndex.bind(element),
-    setArrayItemsSelectedIndex: element.setArrayItemsSelectedIndex.bind(element),
-    resetArrayItemsSelectedIndex: element.resetArrayItemsSelectedIndex.bind(element),
-    getBiToken: element.getBiToken.bind(element)
-  };
-  return facade;
-}
-
-class ElementsSDKShape extends BaseSDKShape {
-  async getSelection() {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const refs = await privateAPI.components.getSelectedComponents();
-    return Promise.all(
-      refs.map(async (ref) => {
-        const builderCtx = await privateAPI.components.getBuilderContext(ref);
-        if (builderCtx) {
-          const builderElement = new ElementSDKShape(
-            this.getApplicationContext(),
-            [],
-            {
-              manifestContextId: builderCtx.manifestContextId,
-              type: builderCtx.compType
-            }
-          );
-          return createSelectedBuilderElement(builderElement);
-        }
-        return privateAPI.components.getComponent(ref);
-      })
-    );
-  }
-  async onSelectionChange(cb) {
-    const events = new EventsSDKShape(this.getApplicationContext());
-    void events.addEventListener("componentSelectionChanged", async () => {
-      cb(await this.getSelection());
-    });
-  }
-}
-var index$a = new PlatformSDKShape(ElementsSDKShape).withPublicMethod("onSelectionChange").withPublicMethod("getSelection").build();
-
-class InfoSDKShape extends BaseSDKShape {
-  async getViewMode() {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    return privateAPI.info.getViewMode();
-  }
-  async getLanguageCode() {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    return privateAPI.info.getLanguageCode();
-  }
-  async getSiteDirection() {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    return privateAPI.info.getSiteDirection();
-  }
-  async siteHasCustomClasses() {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    return privateAPI.info.siteHasCustomClasses();
-  }
-  async getThemeCustomProperties(filter) {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    return privateAPI.info.getThemeCustomProperties(filter);
-  }
-  async getSiteFonts(filter) {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    return privateAPI.info.getSiteFonts(filter);
-  }
-  async getMetaSiteId() {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    return privateAPI.info.getMetaSiteId();
-  }
-}
-var index$9 = new PlatformSDKShape(InfoSDKShape).withPublicMethod("getViewMode").withPublicMethod("getLanguageCode").withPublicMethod("getSiteDirection").withPublicMethod("siteHasCustomClasses").withPublicMethod("getThemeCustomProperties").withPublicMethod("getSiteFonts").withPublicMethod("getMetaSiteId").build();
-
-var WidgetShapeErrorCode = /* @__PURE__ */ ((WidgetShapeErrorCode2) => {
-  WidgetShapeErrorCode2["UndefinedCompRef"] = "UndefinedCompRef";
-  WidgetShapeErrorCode2["NotAvailableMethod"] = "NotAvailableMethod";
-  return WidgetShapeErrorCode2;
-})(WidgetShapeErrorCode || {});
-class WidgetShapeError extends publicEditorPlatformErrors.BaseError {
-  constructor(message, code) {
-    super(message, code, "Widget Error");
-  }
-}
-const createWidgetShapeError = publicEditorPlatformErrors.createErrorBuilder(WidgetShapeError);
-
-const UNDERLINE_DEFINITION = "underline";
-function getFontFamiliesFromFonts(fonts) {
-  return fonts.map((font) => parseFontString({ font }).family).filter(Boolean);
-}
-function parseFontString(fontPickerValue) {
-  const font = {
-    family: void 0,
-    size: void 0
-  };
-  if (fontPickerValue?.font) {
-    const { variableName, fallbackValue } = extractFontVar(
-      fontPickerValue.font
-    );
-    font.cssVariableName = variableName;
-    const parts = fallbackValue.match(/(?:(["']).*?\1|\S)+/g) || [];
-    for (let i = 0; i < parts.length; i++) {
-      const part = parts[i];
-      switch (part) {
-        case "bold":
-          font.bold = true;
-          break;
-        case "italic":
-          font.italic = true;
-          break;
-        default:
-          if (part?.endsWith("px")) {
-            font.size = parseInt(part, 10);
-          } else if (i === parts.length - 1) {
-            font.family = part;
-          } else {
-            font.family = (font.family || "") + " " + part;
-          }
-      }
-    }
-  }
-  if (fontPickerValue?.textDecoration) {
-    font.underline = fontPickerValue.textDecoration === UNDERLINE_DEFINITION;
-  }
-  font.family = font.family?.trim().replace(/['"]+/g, "");
-  return font;
-}
-function extractFontVar(fontString) {
-  const trimmedFont = fontString.trim();
-  const match = trimmedFont.match(/var\((--[\w-]+),\s*(.+)\)/);
-  if (match) {
-    return {
-      variableName: match[1],
-      fallbackValue: match[2]?.trim() ?? ""
-    };
-  } else {
-    return {
-      variableName: void 0,
-      fallbackValue: trimmedFont
-    };
-  }
-}
-
-class WidgetScopedSDK {
-  constructor(compRef, privateAPI) {
-    this.compRef = compRef;
-    this.privateAPI = privateAPI;
-  }
-  async getProp(propName) {
-    const props = await this.privateAPI.refComponents.getProps(this.compRef);
-    return props?.[propName];
-  }
-  async setProp(propName, value) {
-    await this.privateAPI.refComponents.setProps(this.compRef, {
-      [propName]: value
-    });
-  }
-  async getDesignPreset() {
-    return this.privateAPI.designPresets.getDesignPresetName(this.compRef);
-  }
-  async setDesignPreset(designPresetName) {
-    await this.privateAPI.designPresets.setDesignPresetByName(
-      this.compRef,
-      designPresetName
-    );
-  }
-  async getNestedWidget(selector) {
-    const childCompRef = await this.privateAPI.refComponents.findComponentBySelector(
-      this.compRef,
-      selector
-    );
-    if (!childCompRef) {
-      return null;
-    }
-    return new WidgetScopedSDK(childCompRef, this.privateAPI);
-  }
-}
-class WidgetSDKShape extends BaseSDKShape {
-  async #getSelectedComponentRef() {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const refs = await privateAPI.components.getSelectedComponents();
-    const compRef = refs[0];
-    if (!compRef) {
-      throw createWidgetShapeError(WidgetShapeErrorCode.UndefinedCompRef);
-    }
-    return compRef;
-  }
-  async setPreloadFonts(fonts) {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const compRef = await this.#getSelectedComponentRef();
-    if (await privateAPI.refComponents.isRefComponent(compRef)) {
-      throw createWidgetShapeError(
-        WidgetShapeErrorCode.NotAvailableMethod,
-        "not available for the current component type"
-      );
-    }
-    const fontFamilies = getFontFamiliesFromFonts(fonts);
-    await privateAPI.customElement.setPreloadFonts(compRef, fontFamilies);
-  }
-  async getProp(propName) {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const compRef = await this.#getSelectedComponentRef();
-    if (await privateAPI.refComponents.isRefComponent(compRef)) {
-      return new WidgetScopedSDK(compRef, privateAPI).getProp(propName);
-    } else {
-      return privateAPI.customElement.getAttribute(compRef, propName);
-    }
-  }
-  async setProp(propName, value) {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const compRef = await this.#getSelectedComponentRef();
-    if (await privateAPI.refComponents.isRefComponent(compRef)) {
-      return new WidgetScopedSDK(compRef, privateAPI).setProp(propName, value);
-    } else {
-      await privateAPI.customElement.setAttribute(compRef, propName, value);
-    }
-  }
-  async getDesignPreset() {
-    const privateAPI = await this.getPlatformPrivateAPI();
-    const compRef = await this.#getSelectedComponentRef();
-    if (!await privateAPI.refComponents.isRefComponent(compRef)) {
-      throw createWidgetShapeError(
-        WidgetShapeErrorCode.NotAvailableMethod,
-        "not available for the current component type"
-      );
-    }
-    return new WidgetScopedSDK(compRef, privateAPI).getDesignPreset();
-  }
-  async setDesignPreset(designPresetName) {
+  async selectBackground(options) {
     const privateAPI = await this.getPlatformPrivateAPI();
-    const compRef = await this.#getSelectedComponentRef();
-    if (!await privateAPI.refComponents.isRefComponent(compRef)) {
-      throw createWidgetShapeError(
-        WidgetShapeErrorCode.NotAvailableMethod,
-        "not available for the current component type"
-      );
-    }
-    return new WidgetScopedSDK(compRef, privateAPI).setDesignPreset(
-      designPresetName
+    const manifestContextId = await this.getRequiredManifestContextId();
+    return privateAPI.builderComponent.selectBackground(
+      manifestContextId,
+      this.childPath,
+      options
     );
   }
-  async getNestedWidget(selector) {
+  /**
+   * Opens the font weight picker for selecting a font weight for a specified
+   * font family.
+   *
+   * Pass manifest style item keys to bind the picker, or pass manual
+   * options to handle the selection via callbacks.
+   *
+   * @param params - Manifest style item keys, or manual picker options.
+   * @returns Selected font weight.
+   *
+   * @example
+   * ```ts
+   * import { element } from '@wix/editor';
+   *
+   * const weight = await element.selectFontWeight({
+   *   fontFamilyStyleItemKey: 'headingFontFamily',
+   *   fontWeightStyleItemKey: 'headingFontWeight',
+   * });
+   *
+   * const weight = await element.selectFontWeight({
+   *   fontFamily: { family: 'Arial', weight: '400' },
+   *   onChange: (value) => console.log('Selected weight:', value.weight),
+   * });
+   * ```
+   */
+  async selectFontWeight(params) {
     const privateAPI = await this.getPlatformPrivateAPI();
-    const compRef = await this.#getSelectedComponentRef();
-    return new WidgetScopedSDK(compRef, privateAPI).getNestedWidget(selector);
-  }
-}
-const widgetShape = new PlatformSDKShape(WidgetSDKShape).withPublicMethod("getNestedWidget").withPublicMethod("setDesignPreset").withPublicMethod("getDesignPreset").withPublicMethod("setProp").withPublicMethod("getProp").withPublicMethod("setPreloadFonts");
-var index$8 = widgetShape.build();
-
-function fontValueToCSS(fontValue) {
-  return `${fontValue.cssVariableName ? `var(${fontValue.cssVariableName}, ` : ""}${fontValue.italic ? "italic " : ""}${fontValue.bold ? "bold " : ""}${fontValue.size || 16}px ${// wrap each font family with quotes
-  fontValue.family?.split(",").map((fontFamily) => `"${fontFamily.replace(/['"]+/g, "")}"`).join(",") || "serif"}${fontValue.cssVariableName ? ")" : ""}`;
-}
-function parseColorString(colorPickerValue) {
-  if (!colorPickerValue) {
-    return null;
-  }
-  const colorString = colorPickerValue;
-  const match = colorString.match(/var\((--[\w-]+),\s*(.+)\)/);
-  if (match) {
-    return {
-      cssVariableName: match[1],
-      color: match[2]
-    };
-  } else {
+    const manifestContextId = await this.getRequiredManifestContextId();
     return {
-      color: colorString
+      weight: await privateAPI.builderComponent.selectFontWeight(
+        manifestContextId,
+        this.childPath,
+        params
+      )
     };
   }
-}
-function colorValueToCSS(colorValue) {
-  if (!colorValue) {
-    return "";
-  }
-  return colorValue.cssVariableName ? `var(${colorValue.cssVariableName}, ${colorValue.color})` : colorValue.color;
-}
-const fonts = {
-  transformFontInternalValue: (value) => {
-    if (value) {
-      const { theme, cssVariableName, bold, italic, underline, ...rest } = value;
-      return {
-        ...rest,
-        style: {
-          bold,
-          italic,
-          underline
-        },
-        editorKey: cssVariableName || theme || ""
-      };
-    } else {
-      return {
-        editorKey: "font_7",
-        family: "helvetica-w01-roman",
-        size: 16,
-        style: {}
-      };
-    }
-  }
-};
-class InputsSDKShape extends BaseSDKShape {
-  async selectColor(value, options) {
+  /**
+   * Opens the text theme picker for selecting a predefined text theme
+   * (a combination of font and color from the site's theme).
+   *
+   * @param params - Text theme picker configuration.
+   * @param params.target - HTML element to anchor the picker to.
+   * @param params.initialValue - Initial font and color values.
+   * @returns Selected text theme.
+   *
+   * @example
+   * ```ts
+   * import { element } from '@wix/editor';
+   *
+   * const theme = await element.selectTextTheme({
+   *   initialValue: { font: 'Heading 1', color: '#333' },
+   * });
+   * ```
+   */
+  async selectTextTheme(params) {
     const privateAPI = await this.getPlatformPrivateAPI();
-    let colorValue = parseColorString(value);
-    let colorResult = colorValueToCSS(colorValue);
-    await privateAPI.inputs.openColorPicker(
-      {
-        color: colorValue?.cssVariableName || colorValue?.theme || colorValue?.color
-      },
-      ({
-        color,
-        theme,
-        cssVariableTheme
-      }) => {
-        colorValue = {
-          color,
-          theme,
-          cssVariableName: cssVariableTheme
-        };
-        colorResult = colorValueToCSS(colorValue);
-        options?.onChange?.(colorResult);
-      }
+    const manifestContextId = await this.getRequiredManifestContextId();
+    return privateAPI.builderComponent.selectTextTheme(
+      manifestContextId,
+      params
     );
-    return colorResult;
   }
-  async selectFont(value, options) {
+  /**
+   * Retrieves the currently selected index in an array items data group.
+   *
+   * @param options - Specify `arrayItemsDisplayGroupKey` if the component
+   *   has multiple array item groups.
+   * @returns Index of the currently selected array item.
+   *
+   * @example
+   * ```ts
+   * import { element } from '@wix/editor';
+   *
+   * const index = await element.getArrayItemsSelectedIndex();
+   * ```
+   */
+  async getArrayItemsSelectedIndex(options) {
     const privateAPI = await this.getPlatformPrivateAPI();
-    const fontValue = parseFontString(value);
-    let _value = value;
-    await privateAPI.inputs.openFontPickerV2(
-      {
-        ...options,
-        panelSectionsDefinition: {
-          htmlTag: "hidden"
-        },
-        componentStyle: fonts.transformFontInternalValue(fontValue)
-      },
-      (font, accessibility) => {
-        _value = {
-          font: fontValueToCSS(font),
-          textDecoration: font.underline ? UNDERLINE_DEFINITION : void 0
-        };
-        options?.onChange?.(_value);
-      }
+    const manifestContextId = await this.getRequiredManifestContextId();
+    return privateAPI.builderComponent.getArrayItemsSelectedIndex(
+      manifestContextId,
+      this.childPath,
+      options
     );
-    return _value;
   }
-}
-var index$7 = new PlatformSDKShape(InputsSDKShape).withPublicMethod("selectColor").withPublicMethod("selectFont").build();
-
-class PanelsSDKShape extends BaseSDKShape {
-  async openLanguageSupportPanel() {
+  /**
+   * Sets the selected index in an array items data group.
+   *
+   * @param options - Object containing the `index` to select, and optionally
+   *   `arrayItemsDisplayGroupKey` if there are multiple array item groups.
+   *
+   * @example
+   * ```ts
+   * import { element } from '@wix/editor';
+   *
+   * await element.setArrayItemsSelectedIndex({ index: 2 });
+   * ```
+   */
+  async setArrayItemsSelectedIndex(options) {
     const privateAPI = await this.getPlatformPrivateAPI();
-    return privateAPI.panels.openLanguageSupportPanel();
+    const manifestContextId = await this.getRequiredManifestContextId();
+    return privateAPI.builderComponent.setArrayItemsSelectedIndex(
+      manifestContextId,
+      this.childPath,
+      options
+    );
   }
-  async openFontsUploadPanel() {
+  /**
+   * Resets the selected index in an array items data group to the default.
+   *
+   * @param options - Specify `arrayItemsDisplayGroupKey` if the component
+   *   has multiple array item groups.
+   *
+   * @example
+   * ```ts
+   * import { element } from '@wix/editor';
+   *
+   * await element.resetArrayItemsSelectedIndex();
+   * ```
+   */
+  async resetArrayItemsSelectedIndex(options) {
     const privateAPI = await this.getPlatformPrivateAPI();
-    return privateAPI.panels.openFontsUploadPanel();
+    const manifestContextId = await this.getRequiredManifestContextId();
+    return privateAPI.builderComponent.resetArrayItemsSelectedIndex(
+      manifestContextId,
+      this.childPath,
+      options
+    );
   }
-}
-var index$6 = new PlatformSDKShape(PanelsSDKShape).withPublicMethod("openLanguageSupportPanel").withPublicMethod("openFontsUploadPanel").build();
-
-class ModalsSDKShape extends BaseSDKShape {
-  async openDashboardModal(options) {
+  /**
+   * Retrieves the BI (Business Intelligence) token for the component.
+   *
+   * @returns BI token string.
+   *
+   * @example
+   * ```ts
+   * import { element } from '@wix/editor';
+   *
+   * const token = await element.getBiToken();
+   * ```
+   */
+  async getBiToken() {
     const privateAPI = await this.getPlatformPrivateAPI();
-    return privateAPI.panels.openDashboardPanel(
-      await this.getAppDefinitionId(),
-      options
+    const manifestContextId = await this.getRequiredManifestContextId();
+    return privateAPI.builderComponent.getBiToken(
+      manifestContextId,
+      this.childPath
     );
   }
 }
-var index$5 = new PlatformSDKShape(ModalsSDKShape).withPublicMethod("openDashboardModal").build();
+var index$5 = new PlatformSDKShape(ElementSDKShape).withPublicMethod("getDataDefinitions").withPublicMethod("getData").withPublicMethod("getResolvedData").withPublicMethod("setData").withPublicMethod("getStyleDefinitions").withPublicMethod("getStyles").withPublicMethod("setStyles").withPublicMethod("removeStyles").withPublicMethod("getPresetDefinitions").withPublicMethod("getAppliedPreset").withPublicMethod("applyPreset").withPublicMethod("getDisplayGroupDefinitions").withPublicMethod("getDisplayName").withPublicMethod("getState").withPublicMethod("setState").withPublicMethod("onChange").withPublicMethod("getStateDefinitions").withPublicMethod("selectFont").withPublicMethod("selectFontFamily").withPublicMethod("selectMedia").withPublicMethod("selectLink").withPublicMethod("selectColor").withPublicMethod("selectBackground").withPublicMethod("selectFontWeight").withPublicMethod("selectTextTheme").withPublicMethod("getArrayItemsSelectedIndex").withPublicMethod("setArrayItemsSelectedIndex").withPublicMethod("resetArrayItemsSelectedIndex").withPublicMethod("getBiToken").build();
 
 class PreferencesSDKShape extends BaseSDKShape {
   async get(keys) {
@@ -1753,6 +1679,7 @@ const editor = {
 exports.BaseSDKShape = BaseSDKShape;
 exports.ElementSDKShape = ElementSDKShape;
 exports.PlatformSDKShape = PlatformSDKShape;
+exports.ReactElementsSDKShape = ElementSDKShape;
 exports.Workspace = Workspace;
 exports.WorkspaceHost = WorkspaceHost;
 exports.application = index$d;
@@ -1761,15 +1688,16 @@ exports.bindingsProviders = index;
 exports.cmsBindings = index$1;
 exports.controllers = index$2;
 exports.editor = editor;
-exports.element = index$b;
-exports.elements = index$a;
+exports.element = index$5;
+exports.elements = index$b;
 exports.events = index$c;
 exports.externalPanels = index$3;
-exports.info = index$9;
-exports.inputs = index$7;
-exports.modals = index$5;
-exports.panels = index$6;
+exports.info = index$a;
+exports.inputs = index$8;
+exports.modals = index$6;
+exports.panels = index$7;
 exports.preferences = index$4;
 exports.providers = providersPublicSDKShape;
-exports.widget = index$8;
+exports.reactElements = index$5;
+exports.widget = index$9;
 //# sourceMappingURL=index.js.map