@webflow/designer-extension-typings 2.0.30 → 2.0.31

package/api.d.ts

@@ -10,6 +10,7 @@
 /// <reference path="./assets.d.ts" />
 /// <reference path="./element-settings-generated.d.ts" />
 /// <reference path="./element-settings.d.ts" />
+/// <reference path="./instance-props.d.ts" />
 /// <reference path="./app-modes-generated.d.ts" />
 /// <reference path="./app-connections.d.ts" />
 

package/components.d.ts

@@ -69,6 +69,34 @@ interface Component {
    */
   getVariants(): Promise<Variant[]>;
 
+  /**
+   * Create a new variant for this component.
+   * @param options - The name for the new variant and optional selection behavior
+   * @returns A promise that resolves to the newly created Variant.
+   * @example
+   * ```ts
+   * const variant = await heroComponent.createVariant({ name: "Dark Mode" });
+   * console.log(variant.name); // "Dark Mode"
+   * ```
+   */
+  createVariant(options: CreateVariantOptions): Promise<Variant>;
+
+  /**
+   * Duplicate an existing variant. Overload: pass sourceVariantId as second argument.
+   * @param options - Options for the duplicate (name base, isSelected)
+   * @param sourceVariantId - The variant ID to duplicate, or 'base' to duplicate the base variant
+   * @returns A promise that resolves to the newly created duplicate Variant.
+   * @example
+   * ```ts
+   * const duplicate = await heroComponent.createVariant({ name: "Copy" }, variants[1].id);
+   * const baseCopy = await heroComponent.createVariant({ name: "Base Copy" }, "base");
+   * ```
+   */
+  createVariant(
+    options: CreateVariantOptions,
+    sourceVariantId: string
+  ): Promise<Variant>;
+
   /**
    * Get the currently selected variant for this component.
    * The selected variant reflects the Designer's current editing
@@ -131,6 +159,16 @@ interface Component {
   setSettings(settings: Partial<ComponentSettings>): Promise<null>;
 }
 
+/**
+ * Options for creating a new variant or duplicating an existing one.
+ */
+interface CreateVariantOptions {
+  /** The name for the new variant (required for create, optional base for duplicate) */
+  name: string;
+  /** Whether to select this variant after creation (optional, defaults to false) */
+  isSelected?: boolean;
+}
+
 /** Select variant by display name. */
 interface SetSelectedVariantByName {
   name: string;

package/element-presets-generated.d.ts

@@ -37,6 +37,7 @@ type ElementPresets = {
   CommerceCheckoutAdditionalInfoSummaryWrapper: ElementPreset<CommerceCheckoutAdditionalInfoSummaryWrapperElement>;
   CommerceDownloadsWrapper: ElementPreset<CommerceDownloadsWrapperElement>;
   DropdownWrapper: ElementPreset<DropdownWrapperElement>;
+  DropTarget: ElementPreset<DropTargetElement>;
   DynamoWrapper: ElementPreset<DynamoWrapperElement>;
   HtmlEmbed: ElementPreset<HtmlEmbedElement>;
   Video: ElementPreset<VideoElement>;
@@ -104,4 +105,5 @@ type ElementPresets = {
   LayoutFooterDark: ElementPreset<SectionElement>;
   LayoutFooterLight: ElementPreset<SectionElement>;
   LayoutFooterSubscribe: ElementPreset<SectionElement>;
+  Slot: ElementPreset<SlotElement>;
 };

package/element-settings-generated.d.ts

@@ -20,6 +20,7 @@ type BindableValueType =
   | 'imageSet'
   | 'number'
   | 'enum'
+  | 'option'
   | 'slot'
   | 'reference'
   | 'referenceSet'
@@ -28,7 +29,9 @@ type BindableValueType =
   | 'sort'
   | 'selectedItems'
   | 'visibility'
-  | 'booleanFilter';
+  | 'booleanFilter'
+  | 'altText'
+  | 'id';
 
 type PropType =
   | 'textContent'
@@ -42,8 +45,24 @@ type PropType =
   | 'variant'
   | 'slot'
   | 'id'
+  | 'altText'
   | 'booleanFilter'
   | 'visibility'
   | 'filter'
   | 'sort'
   | 'selectedItems';
+
+type CmsFieldType =
+  | 'plainText'
+  | 'email'
+  | 'phone'
+  | 'url'
+  | 'date'
+  | 'option'
+  | 'number'
+  | 'color'
+  | 'boolean'
+  | 'image'
+  | 'file'
+  | 'video'
+  | 'richText';

package/element-settings.d.ts

@@ -7,7 +7,50 @@ interface PropBindableSource {
   bindableTo: readonly BindableValueType[];
 }
 
-type BindableSource = PropBindableSource;
+interface CmsBindableSource {
+  sourceType: 'cms';
+  collectionId: string;
+  collectionName: string;
+  fieldId: string;
+  fieldName: string;
+  fieldGroup: string | null;
+  fieldType: CmsFieldType;
+  valueType: BindableValueType;
+  bindableTo: readonly BindableValueType[];
+}
+
+interface PageBindableSource {
+  sourceType: 'page';
+  fieldKey: string;
+  fieldName: string;
+  valueType: BindableValueType;
+  bindableTo: readonly BindableValueType[];
+}
+
+interface LocaleBindableSource {
+  sourceType: 'locale';
+  fieldKey: string;
+  fieldName: string;
+  fieldType: 'string';
+  valueType: BindableValueType;
+  bindableTo: readonly BindableValueType[];
+}
+
+interface LocaleItemBindableSource {
+  sourceType: 'localeItem';
+  fieldKey: string;
+  fieldName: string;
+  fieldType: 'string';
+  valueType: BindableValueType;
+  bindableTo: readonly BindableValueType[];
+}
+
+type BindableSource =
+  | PropBindableSource
+  | CmsBindableSource
+  | PageBindableSource
+  | LocaleBindableSource
+  | LocaleItemBindableSource;
 
 interface SearchBindableSourcesOptions {
   /** Filter to sources compatible with a specific element setting key (e.g., "altText", "src", "domId") */

package/elements-generated.d.ts

@@ -71,6 +71,7 @@ interface WebflowElement {
   remove(this: {id: FullElementId}): Promise<null>;
   readonly before: InsertOrMoveElement;
   readonly after: InsertOrMoveElement;
+  getParentComponent(this: {id: FullElementId}): Promise<Component | null>;
 }
 
 interface CustomAttributes {
@@ -178,6 +179,13 @@ interface ComponentElement
   readonly plugin: '';
   getComponent(): Promise<Component>;
   getSlots(): Promise<Array<SlotInstanceElement>>;
+  getProps(): Promise<Array<InstancePropSummary>>;
+  searchProps(
+    options?: SearchInstancePropsOptions
+  ): Promise<Array<InstanceProp>>;
+  setProps(
+    props: Array<SetInstancePropEntry>
+  ): Promise<Array<SetInstancePropEntry>>;
 }
 
 interface UnknownElement
@@ -3161,6 +3169,22 @@ interface DropdownWrapperElement
   readonly plugin: 'Dropdown';
 }
 
+interface DropTargetElement
+  extends
+    WebflowElement,
+    CustomAttributes,
+    DomId,
+    Styles,
+    Children,
+    NoTextContent,
+    NoAppConnections,
+    DisplayName,
+    ElementSettings {
+  readonly id: FullElementId;
+  readonly type: 'DropTarget';
+  readonly plugin: 'PageBuilding';
+}
+
 interface DynamoWrapperElement
   extends
     WebflowElement,
@@ -4639,6 +4663,22 @@ interface GridRowElement
   readonly plugin: 'Users';
 }
 
+interface SlotElement
+  extends
+    WebflowElement,
+    CustomAttributes,
+    DomId,
+    Styles,
+    Children,
+    NoTextContent,
+    NoAppConnections,
+    DisplayName,
+    ElementSettings {
+  readonly id: FullElementId;
+  readonly type: 'Slot';
+  readonly plugin: 'Slots';
+}
+
 interface FrameElement
   extends
     WebflowElement,
@@ -4842,6 +4882,7 @@ type AnyElement =
   | DropdownListElement
   | DropdownToggleElement
   | DropdownWrapperElement
+  | DropTargetElement
   | DynamoWrapperElement
   | DynamoListElement
   | DynamoItemElement
@@ -4932,4 +4973,5 @@ type AnyElement =
   | BlockHeaderElement
   | FlexColumnElement
   | GridRowElement
+  | SlotElement
   | FrameElement;

package/instance-props.d.ts

@@ -0,0 +1,150 @@
+// Instance Props types
+
+interface LinkResolvedValue {
+  mode:
+    | 'url'
+    | 'page'
+    | 'pageSection'
+    | 'email'
+    | 'phone'
+    | 'file'
+    | 'collectionPage';
+  to?:
+    | string
+    | {pageId: string}
+    | {assetId: string}
+    | {fullElementId: {element: string; component: string}}
+    | {pageSlug: string};
+  openInNewTab?: boolean;
+  emailSubject?: string;
+  rel?: string;
+}
+
+interface VideoResolvedValue {
+  src?: string;
+  title?: string;
+}
+
+interface RichTextResolvedValue {
+  innerText: string;
+}
+
+type ResolvedValue =
+  | string
+  | number
+  | boolean
+  | null
+  | LinkResolvedValue
+  | VideoResolvedValue
+  | RichTextResolvedValue;
+
+interface StaticPropValue {
+  sourceType: 'static';
+  value: ResolvedValue | null;
+}
+
+type BindingPropValue =
+  | {
+      sourceType: 'prop';
+      propId: string;
+      propName: string;
+      propGroup: string | null;
+    }
+  | {
+      sourceType: 'cms';
+      collectionId: string;
+      collectionName: string;
+      fieldId: string;
+      fieldName: string;
+      fieldGroup: string | null;
+      fieldType: CmsFieldType;
+    }
+  | {
+      sourceType: 'locale';
+      fieldKey: string;
+      fieldName: string;
+      fieldType: 'string';
+    }
+  | {
+      sourceType: 'localeItem';
+      fieldKey: string;
+      fieldName: string;
+      fieldType: 'string';
+    }
+  | {
+      sourceType: 'page';
+      fieldKey: string;
+      fieldName: string;
+    }
+  | {sourceType: 'conditional'}
+  | {sourceType: 'legacy'};
+
+type InstancePropValue = StaticPropValue | BindingPropValue;
+
+interface InstancePropDisplay {
+  label: string;
+  group: string | null;
+  trueLabel?: string;
+  falseLabel?: string;
+}
+
+interface InstanceProp {
+  propId: string;
+  valueType: BindableValueType;
+  hasOverride: boolean;
+  value: InstancePropValue;
+  resolvedValue: ResolvedValue | null;
+  defaultValue: ResolvedValue | null;
+  display: InstancePropDisplay;
+}
+
+interface InstancePropSummary {
+  propId: string;
+  value: ResolvedValue | BindingPropValue | null;
+  hasOverride: boolean;
+}
+
+interface SearchInstancePropsOptions {
+  /** Filter to props that produce a specific value type (e.g., "string", "boolean") */
+  valueType?: BindableValueType;
+}
+
+// Set Instance Props types
+
+interface PropBindingInput {
+  sourceType: 'prop';
+  propId: string;
+}
+
+interface CmsBindingInput {
+  sourceType: 'cms';
+  collectionId: string;
+  fieldId: string;
+}
+
+interface PageBindingInput {
+  sourceType: 'page';
+  fieldKey: string;
+}
+
+interface LocaleBindingInput {
+  sourceType: 'locale';
+  fieldKey: string;
+}
+
+interface LocaleItemBindingInput {
+  sourceType: 'localeItem';
+  fieldKey: string;
+}
+
+type BindingInput =
+  | PropBindingInput
+  | CmsBindingInput
+  | PageBindingInput
+  | LocaleBindingInput
+  | LocaleItemBindingInput;
+
+interface SetInstancePropEntry {
+  propId: string;
+  value: ResolvedValue | BindingInput | null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webflow/designer-extension-typings",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "license": "MIT",
   "description": "Typings for the Webflow Designer Extension API",
   "main": "",