@wix/editor 1.490.0 → 1.491.0

package/dist/statics/index.js

@@ -175,35 +175,361 @@
   }
   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,
@@ -740,614 +1066,214 @@
      * 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) {
@@ -1751,6 +1677,7 @@
   exports.BaseSDKShape = BaseSDKShape;
   exports.ElementSDKShape = ElementSDKShape;
   exports.PlatformSDKShape = PlatformSDKShape;
+  exports.ReactElementsSDKShape = ElementSDKShape;
   exports.Workspace = Workspace;
   exports.WorkspaceHost = WorkspaceHost;
   exports.application = index$d;
@@ -1759,17 +1686,18 @@
   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