@webflow/designer-extension-typings 2.0.30 → 2.0.33

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" />
 
@@ -28,6 +29,7 @@ interface SharedApi {
    * - siteId: the unique ID of the current Webflow site.
    * - siteName: the name of the current Webflow site.
    * - shortName: a shortened reference to the name of the current Webflow site.
+   * - kind: the type of site ('site' for standard Webflow sites).
    * - isPasswordProtected: whether the site is password protected.
    * - isPrivateStaging: whether the site has private staging turned on or not.
    * - domains: an array of objects representing the domains associated with the site, each containing the following properties:
@@ -41,6 +43,7 @@ interface SharedApi {
    * console.log('Site ID:', siteInfo.siteId);
    * console.log('Site Name:', siteInfo.siteName);
    * console.log('Shortened Site Name:', siteInfo.shortName);
+   * console.log('Site Kind:', siteInfo.kind);
    * console.log('Domains:', siteInfo.domains);
    * console.log('Workspace ID:', siteInfo.workspaceId);
    * console.log('Workspace Slug:', siteInfo.workspaceSlug);
@@ -50,6 +53,7 @@ interface SharedApi {
     siteId: string;
     siteName: string;
     shortName: string;
+    kind: 'site';
     isPasswordProtected: boolean;
     isPrivateStaging: boolean;
     workspaceId: string;
@@ -829,6 +833,27 @@ interface DesignerOnlyApi {
     event: 'pseudomode',
     callback: (pseudoMode: null | PseudoStateKey) => void
   ): Unsubscribe;
+  /**
+   * Subscribe to variant selection changes. The callback fires whenever the selected
+   * variant changes on the component canvas.
+   * @param event - The name of the event to subscribe to, specifically 'selectedvariant'.
+   * @param callback - A callback function receiving the newly selected Variant.
+   * @returns An Unsubscribe function that can be used to stop receiving notifications.
+   * @example
+   * ```ts
+   * const unsub = webflow.subscribe('selectedvariant', (variant) => {
+   *   console.log('Variant changed:', variant.name);
+   *   console.log('Variant ID:', variant.id);
+   * });
+   *
+   * // Later, to stop listening:
+   * unsub();
+   * ```
+   */
+  subscribe(
+    event: 'selectedvariant',
+    callback: (variant: Variant) => void
+  ): Unsubscribe;
   /**
    * Checks if the user has the ability to perform the given App Mode
    * @param appModes

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
@@ -104,6 +132,88 @@ interface Component {
     options: SetSelectedVariantOptions | string
   ): Promise<null>;
 
+  /**
+   * Reorder variants on this component by specifying an array of variant IDs
+   * in the desired order. Accepts variant IDs or `'base'`.
+   *
+   * When a partial list is provided, the listed variants are repositioned
+   * relative to the first item in the list while unlisted variants keep their
+   * existing relative order.
+   *
+   * @param variantIds - Array of variant IDs (or `'base'`) in the desired order.
+   * @returns A Promise that resolves when the reorder is complete.
+   * @example
+   * ```ts
+   * // Full reorder
+   * await component.reorderVariants(['base', 'variant-2', 'variant-1', 'variant-3']);
+   *
+   * // Partial reorder — move variant-1 and variant-3 together
+   * // Before: base, variant-1, variant-2, variant-3
+   * await component.reorderVariants(['variant-1', 'variant-3']);
+   * // After: base, variant-1, variant-3, variant-2
+   * ```
+   */
+  reorderVariants(variantIds: string[]): Promise<null>;
+
+  /**
+   * Delete a variant from this component by ID.
+   * The base variant cannot be deleted.
+   *
+   * @param options - An object containing the `id` of the variant to delete.
+   * @returns A promise that resolves when the variant has been deleted.
+   * @example
+   * ```ts
+   * await heroComponent.deleteVariant({ id: 'variant-456' });
+   * ```
+   */
+  deleteVariant(options: DeleteVariantOptions): Promise<null>;
+  /**
+   * Get a single variant by ID.
+   * Use `'base'` to retrieve the base variant.
+   * @param variantId - The variant ID, or `'base'` for the base variant
+   * @returns A Promise resolving to the Variant object.
+   * @example
+   * ```ts
+   * const variant = await component.getVariant('variant-123');
+   * console.log(variant.name); // "Dark Mode"
+   *
+   * const base = await component.getVariant('base');
+   * console.log(base.name); // "Primary"
+   * ```
+   */
+  getVariant(variantId: string): Promise<Variant>;
+
+  /**
+   * Update settings on a variant. Currently only `name` is supported.
+   * Use `'base'` as the variant ID to rename the base variant.
+   *
+   * @param variantId - The variant ID, or `'base'` for the base variant
+   * @param settings - An object with the properties to update
+   * @returns A Promise resolving to the updated Variant object.
+   * @example
+   * ```ts
+   * // Two-argument form
+   * const updated = await component.setVariant('variant-123', { name: 'Foo' });
+   *
+   * // Rename the base variant
+   * const base = await component.setVariant('base', { name: 'Default' });
+   * ```
+   */
+  setVariant(variantId: string, settings: {name: string}): Promise<Variant>;
+
+  /**
+   * Update settings on a variant using an options object.
+   * Currently only `name` is supported.
+   *
+   * @param options - An object containing the variant `id` and properties to update
+   * @returns A Promise resolving to the updated Variant object.
+   * @example
+   * ```ts
+   * const updated = await component.setVariant({ id: 'variant-123', name: 'Foo' });
+   * ```
+   */
+  setVariant(options: SetVariantOptions): Promise<Variant>;
+
   /**
    * Get the settings (name, group, description) of a component.
    * @returns A Promise resolving to the component's settings.
@@ -129,6 +239,56 @@ interface Component {
    * ```
    */
   setSettings(settings: Partial<ComponentSettings>): Promise<null>;
+
+  /**
+   * Get all prop definitions on this component.
+   * Returns all prop types including variant, visibility, filter, sort, selectedItems,
+   * and booleanFilter — not only the creatable types.
+   * Props are returned in panel display order: ungrouped first, then grouped.
+   * @returns A Promise resolving to an array of prop definitions.
+   */
+  getProps(): Promise<Prop[]>;
+
+  /**
+   * Create a new prop on this component.
+   *
+   * Supports all 10 creatable prop types. Name conflicts within the same group
+   * are auto-incremented (e.g., "Heading" → "Heading 2"). The returned `Prop`
+   * includes computed fields (`id`, `valueType`, `bindableTo`) so callers don't
+   * need a follow-up `getProps()` call.
+   *
+   * @param options - The prop definition including type, name, and optional settings.
+   * @returns A Promise resolving to the created prop with computed binding metadata.
+   *
+   * @example
+   * ```ts
+   * const prop = await component.createProp({
+   *   type: 'textContent',
+   *   name: 'Heading',
+   *   group: 'Content',
+   *   defaultValue: 'Welcome',
+   * });
+   * ```
+   */
+  createProp(options: CreatePropOptions): Promise<Prop>;
+
+  /**
+   * Create multiple props on this component in a single transaction.
+   * If any prop fails validation, no props are created.
+   * @param options - An array of prop definitions, each using the same shape as createProp.
+   * @returns A Promise resolving to an array of created props, in the same order as the input.
+   */
+  createProps(options: CreatePropOptions[]): Promise<Prop[]>;
+}
+
+/**
+ * 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. */
@@ -146,6 +306,19 @@ type SetSelectedVariantOptions =
   | SetSelectedVariantByName
   | SetSelectedVariantById;
 
+/** Options for deleting a variant by ID. */
+interface DeleteVariantOptions {
+  /** The ID of the variant to delete. The base variant ('base') cannot be deleted. */
+  id: string;
+}
+/** Options for setVariant — update variant settings by ID. */
+interface SetVariantOptions {
+  /** The variant ID, or `'base'` for the base variant. */
+  id: string;
+  /** The new display name for the variant. */
+  name: string;
+}
+
 interface Variant {
   /** The variant ID. The base variant always has id 'base'. */
   readonly id: string;
@@ -160,6 +333,170 @@ interface Variant {
   readonly isSelected: boolean;
 }
 
+/**
+ * A prop definition on a component.
+ *
+ * `type` and `valueType` describe the same prop from two different angles:
+ * - `type` is the prop's structural category in the component definition
+ *   (e.g. `'image'` for image asset props).
+ * - `valueType` is the data-binding value type used when binding a CMS field
+ *   or variable to this prop (e.g. `'imageAsset'` for the same image prop).
+ * For most prop types these are identical. The only current exception is image
+ * asset props, where `type === 'image'` and `valueType === 'imageAsset'`.
+ */
+interface Prop {
+  /** The field ID from the component's WFDL data type. */
+  readonly id: string;
+  /**
+   * The prop's structural category (e.g. `'string'`, `'boolean'`, `'image'`,
+   * `'variant'`, `'slot'`). Use this to determine which optional fields
+   * (`min`/`max`/`decimals`, `trueLabel`/`falseLabel`, `multiline`) are present.
+   */
+  readonly type: PropType;
+  /**
+   * The data-binding value type for this prop (e.g. `'string'`, `'boolean'`,
+   * `'imageAsset'`, `'variant'`). Use this when filtering which CMS fields or
+   * variables are compatible with this prop via `bindableTo`.
+   * Identical to `type` for all prop types except image asset props
+   * (`type: 'image'`, `valueType: 'imageAsset'`).
+   */
+  readonly valueType: BindableValueType;
+  /** The data-binding target types this prop can accept. */
+  readonly bindableTo: readonly BindableValueType[];
+  /** The display name for this prop (derived from its label). */
+  name: string;
+  /** The group name this prop belongs to, or null if ungrouped. */
+  group: string | null;
+  /** A tooltip description for this prop, or null if not set. */
+  tooltip: string | null;
+  /**
+   * The default value for this prop, or null if not set or not applicable.
+   *
+   * The shape depends on `valueType`:
+   * - `'string'` | `'number'` | `'id'` | `'altText'` → the raw primitive value
+   * - `'boolean'` → `true` or `false`
+   * - `'imageAsset'` → the asset ID string
+   * - `'link'` → `{ mode: string; to?: string | object; openInNewTab?: boolean; rel?: string }`
+   * - `'video'` → `{ src?: string; title?: string }`
+   * - `'textContent'` → the plain-text string extracted from the default children
+   * - `'richText'` → `{ innerText: string }`
+   * - `'variant'` | `'visibility'` | `'filter'` | `'sort'` | `'selectedItems'`
+   *   → always `null`
+   */
+  readonly defaultValue: ResolvedValue | null;
+  /** Whether the text input allows multiple lines. Present on string and textContent props. */
+  multiline?: boolean;
+  /** The minimum allowed value. Present on number props. */
+  min?: number;
+  /** The maximum allowed value. Present on number props. */
+  max?: number;
+  /** The number of decimal places (precision) allowed. Present on number props. */
+  decimals?: number;
+  /** The label shown when the boolean is true. Present on boolean props. */
+  trueLabel?: string;
+  /** The label shown when the boolean is false. Present on boolean props. */
+  falseLabel?: string;
+}
+
+// ---------------------------------------------------------------------------
+// createProp input types (discriminated union on `type`)
+// ---------------------------------------------------------------------------
+
+/** Common fields shared by all prop types. */
+interface CreatePropCommon {
+  /** Display name for the prop. Auto-incremented on conflicts within the same group. */
+  name: string;
+  /** Group/folder name. Props with the same group appear together in the props panel. */
+  group?: string;
+  /** Tooltip text shown on hover in the props panel. */
+  tooltip?: string;
+  /** The default value for this prop, or null if not set or not applicable. */
+  defaultValue?: ResolvedValue | null;
+}
+
+interface TextContentPropInput extends CreatePropCommon {
+  type: 'textContent';
+  /** Whether the text input supports multiple lines. */
+  multiline?: boolean;
+  defaultValue?: string;
+}
+
+interface StringPropInput extends CreatePropCommon {
+  type: 'string';
+  defaultValue?: string;
+}
+
+interface RichTextPropInput extends CreatePropCommon {
+  type: 'richText';
+  defaultValue?: RichTextResolvedValue;
+}
+
+interface ImagePropInput extends CreatePropCommon {
+  type: 'image';
+  /** Default asset ID. */
+  defaultValue?: string;
+}
+
+interface LinkPropInput extends CreatePropCommon {
+  type: 'link';
+  defaultValue?: LinkResolvedValue;
+}
+
+interface VideoPropInput extends CreatePropCommon {
+  type: 'video';
+  defaultValue?: VideoResolvedValue;
+}
+
+interface NumberPropInput extends CreatePropCommon {
+  type: 'number';
+  min?: number;
+  max?: number;
+  /** Number of decimal places allowed. */
+  decimals?: number;
+  defaultValue?: number;
+}
+
+interface BooleanPropInput extends CreatePropCommon {
+  type: 'boolean';
+  /** Label shown when the value is true (e.g., "Visible"). */
+  trueLabel?: string;
+  /** Label shown when the value is false (e.g., "Hidden"). */
+  falseLabel?: string;
+  defaultValue?: boolean;
+}
+
+interface IdPropInput extends CreatePropCommon {
+  type: 'id';
+  /**
+   * Default ID value. Normalized on the host side — invalid characters are
+   * stripped, spaces become hyphens, result is lowercased. The response returns
+   * the normalized value. Error if normalization produces an empty string.
+   */
+  defaultValue?: string;
+}
+
+interface AltTextPropInput extends CreatePropCommon {
+  type: 'altText';
+  /**
+   * Default alt text value. The special strings `"decorative"` (marks image as
+   * decorative) and `"inherit"` (inherit from asset) have semantic meaning.
+   */
+  defaultValue?: string | null;
+}
+
+/** Options for creating a new prop on a component. Discriminated on `type`. */
+type CreatePropOptions =
+  | TextContentPropInput
+  | StringPropInput
+  | RichTextPropInput
+  | ImagePropInput
+  | LinkPropInput
+  | VideoPropInput
+  | NumberPropInput
+  | BooleanPropInput
+  | IdPropInput
+  | AltTextPropInput;
+
 /**
  * Settings for a component, including name, group, and description.
  */

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,10 @@ type BindableValueType =
   | 'sort'
   | 'selectedItems'
   | 'visibility'
-  | 'booleanFilter';
+  | 'booleanFilter'
+  | 'altText'
+  | 'id'
+  | 'headingTag';
 
 type PropType =
   | 'textContent'
@@ -42,8 +46,26 @@ type PropType =
   | 'variant'
   | 'slot'
   | 'id'
+  | 'altText'
   | 'booleanFilter'
   | 'visibility'
   | 'filter'
   | 'sort'
-  | 'selectedItems';
+  | 'selectedItems'
+  | 'headingTag';
+
+type CmsFieldType =
+  | 'plainText'
+  | 'email'
+  | 'phone'
+  | 'url'
+  | 'date'
+  | 'option'
+  | 'number'
+  | 'color'
+  | 'boolean'
+  | 'image'
+  | 'multiImage'
+  | 'file'
+  | 'video'
+  | 'richText';

package/element-settings.d.ts

@@ -7,7 +7,65 @@ 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 ElementSetting {
+  valueType: BindableValueType;
+  canBind: boolean;
+  value: SettingValue;
+  resolvedValue: ResolvedValue | null;
+  display: SettingDisplay;
+}
+
+interface SearchSettingsOptions {
+  /** Filter to settings that produce a specific value type (e.g., "string", "image") */
+  valueType?: BindableValueType;
+  /** Filter to a specific setting by key (e.g., "domId", "assetId") */
+  key?: string;
+}
 
 interface SearchBindableSourcesOptions {
   /** Filter to sources compatible with a specific element setting key (e.g., "altText", "src", "domId") */
@@ -15,3 +73,33 @@ interface SearchBindableSourcesOptions {
   /** Filter to sources that produce a specific value type (e.g., "string", "imageAsset") */
   valueType?: BindableValueType;
 }
+
+/**
+ * Input to element.setSettings().
+ * Each key is a setting key (e.g., 'domId', 'tag', 'assetId').
+ * Values can be:
+ * - A static value (string, number, boolean, or object depending on the setting type)
+ * - A BindingInput to bind the setting to a data source
+ * - null to reset the setting to its default / disconnect any binding
+ */
+type SetSettingsInput = Record<string, ResolvedValue | BindingInput | null>;
+
+/**
+ * Return type for element.getSettings().
+ * Each key is a setting key (e.g., 'domId', 'tag', 'visibility').
+ * Static values are bare (string, number, boolean, etc.).
+ * Bound values include binding metadata (sourceType + source fields).
+ * Settings with no value and no default are null.
+ */
+type ElementSettingSummaries = Record<
+  string,
+  ResolvedValue | BindingValue | null
+>;
+
+/**
+ * Return type for element.getResolvedSettings().
+ * Each key is a setting key (e.g., 'domId', 'tag', 'visibility').
+ * Values are the resolved output — static values are bare, bindings
+ * are evaluated to their current value, and unresolvable bindings are null.
+ */
+type ResolvedElementSettings = Record<string, ResolvedValue | null>;