@webflow/designer-extension-typings 2.0.35 → 2.1.1

package/api.d.ts

@@ -21,6 +21,19 @@ interface AppModeChangeEvent {
   appModes: {[key in AppMode]: boolean};
 }
 
+type AppearanceSettings =
+  | 'darkDefault'
+  | 'darkDarker'
+  | 'darkBrighter'
+  | 'light';
+
+type ThemeStyles = {
+  colors: Record<string, string>;
+  boxShadows: Record<string, string>;
+  controls: Record<string, string>;
+  opacities: Record<string, string>;
+};
+
 interface SharedApi {
   /**
    * Get metadata about the current Site.
@@ -169,6 +182,20 @@ interface SharedApi {
     options: ComponentOptions,
     source: Component
   ): Promise<Component>;
+  /**
+   * Duplicate an existing component by ID.
+   * @param options - Options for the new component, including a required name.
+   * @param source - The ID of the existing Component to duplicate.
+   * @returns A Promise resolving to the newly created Component.
+   * @example
+   * ```ts
+   * const copy = await webflow.registerComponent({name: 'Hero Copy'}, '204d04de-bf48-5b5b-0ca8-6ec4c5364fd2')
+   * ```
+   */
+  registerComponent(
+    options: ComponentOptions,
+    source: string
+  ): Promise<Component>;
   /**
    * Convert an element or element preset into a component. Equivalent to the
    * "Convert selection" action in the Designer's "New component" menu.
@@ -660,6 +687,19 @@ interface DesignerOnlyApi {
    * ```
    */
   getMediaQuery(): Promise<BreakpointId>;
+  /**
+   * Get the currently active designer theme.
+   * @returns The active theme name.
+   */
+  getTheme(): Promise<AppearanceSettings>;
+
+  /**
+   * Get the structured style tokens for a given theme. Returns color, box-shadow,
+   * control, and opacity token values as flat key-value records.
+   * @param themeName - The theme to get tokens for.
+   * @returns The ThemeStyles object for the requested theme.
+   */
+  getThemeStyles(themeName: AppearanceSettings): Promise<ThemeStyles>;
   /**
    * Get the current pseudo mode.
    * @returns A Promise that resolves to a PseudoStateKey which is a string representing the current pseudo mode.
@@ -860,6 +900,14 @@ interface DesignerOnlyApi {
     event: 'selectedvariant',
     callback: (variant: Variant) => void
   ): Unsubscribe;
+  /**
+   * Subscribe to designer theme changes. The callback fires whenever the user
+   * switches themes in the Webflow designer appearance settings.
+   */
+  subscribe(
+    event: 'currenttheme',
+    callback: (theme: AppearanceSettings) => void
+  ): Unsubscribe;
   /**
    * Checks if the user has the ability to perform the given App Mode
    * @param appModes

package/elements-generated.d.ts

@@ -273,8 +273,13 @@ interface ComponentElement
   readonly id: FullElementId;
   readonly type: 'ComponentInstance';
   readonly plugin: '';
+  readonly selectedSlotId?: string | null;
   getComponent(): Promise<Component>;
   getSlots(): Promise<Array<SlotInstanceElement>>;
+  getSelectedSlot(): Promise<SlotInstanceElement | null>;
+  getTextPropElement(
+    propId: string
+  ): Promise<TextPropElement | RichTextPropElement | null>;
   getProps(): Promise<Array<InstancePropSummary>>;
   getResolvedProps(): Promise<Array<ResolvedInstanceProp>>;
   searchProps(
@@ -284,6 +289,7 @@ interface ComponentElement
     props: Array<SetInstancePropEntry>
   ): Promise<Array<SetInstancePropEntry>>;
   resetAllProps(): Promise<null>;
+  unlinkComponent(): Promise<AnyElement>;
 }
 
 interface UnknownElement

package/package.json

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

package/slots.d.ts

@@ -14,3 +14,23 @@ interface SlotInstanceElement {
   append(child: Component): Promise<null>;
   prepend(child: Component): Promise<null>;
 }
+
+interface FullTextPropId {
+  readonly component: string;
+  readonly element: string;
+  readonly prop: string;
+}
+
+interface TextPropElement {
+  readonly id: FullTextPropId;
+  readonly type: 'TextPropElement';
+  getDisplayName(): Promise<string>;
+  getChildren(): Promise<AnyElement[]>;
+}
+
+interface RichTextPropElement {
+  readonly id: FullTextPropId;
+  readonly type: 'RichTextPropElement';
+  getDisplayName(): Promise<string>;
+  getChildren(): Promise<AnyElement[]>;
+}

package/styles-generated.d.ts

@@ -1015,7 +1015,6 @@ type PseudoStateKey =
   | 'last-child'
   | 'hover'
   | 'active'
-  | 'pressed'
   | 'visited'
   | 'focus'
   | 'focus-visible'

package/styles.d.ts

@@ -12,6 +12,16 @@ interface Style {
    * ```
    */
   getName(): Promise<string>;
+  /**
+   * Rename the Style.
+   * @param name - The new name for the Style.
+   * @returns A Promise that resolves to null when the rename is complete.
+   * @example
+   * ```ts
+   * await myStyle.setName('NewStyleName');
+   * ```
+   */
+  setName(name: string): Promise<null>;
   /**
    * Retrieve the properties of the style.
    * @param options - Options to filter properties based on breakpoints, pseudo states, and component variants.
@@ -165,7 +175,7 @@ interface Style {
   /**
    * Retrieve a variable mode from the style.
    * @param collection - The collection from which to get the currently applied mode.
-   * @param options - Options to get variable mode based on breakpoints and pseudo classes / states.
+   * @param options - Options to get variable mode based on breakpoints, pseudo classes / states, and component variants.
    * @example
    * ```ts
    * const collection = await webflow.getVariableCollectionById('collection-id');
@@ -174,29 +184,31 @@ interface Style {
    */
   getVariableMode(
     collection: VariableCollection,
-    options?: BreakpointAndPseudo
+    options?: StyleOptions
   ): Promise<null | VariableMode>;
   /**
    * Sets a variable mode for the style.
    * @param collection - The collection that the mode being set belongs to.
    * @param mode - The variable mode to set.
-   * @param options - Options to set variable mode based on breakpoints and pseudo classes / states.
+   * @param options - Options to set variable mode based on breakpoints, pseudo classes / states, and component variants.
    * @example
    * ```ts
    * const collection = await webflow.getVariableCollectionById('collection-id');
    * const mode = await collection.getVariableModeByName('Dark');
-   * await myStyle.setVariableMode(collection, mode);
+   * await myStyle.setVariableMode(collection, mode, {
+   *   variantId: 'variant-dark',
+   * });
    * ```
    */
   setVariableMode(
     collection: VariableCollection,
     mode: VariableMode,
-    options?: BreakpointAndPseudo
+    options?: StyleOptions
   ): Promise<null>;
   /**
    * Removes a variable mode from the style.
    * @param collection - The collection that the mode being removed belongs to.
-   * @param options - Options to remove variable mode based on breakpoints and pseudo classes / states.
+   * @param options - Options to remove variable mode based on breakpoints, pseudo classes / states, and component variants.
    * @example
    * ```ts
    * const collection = await webflow.getVariableCollectionById('collection-id');
@@ -205,23 +217,23 @@ interface Style {
    */
   removeVariableMode(
     collection: VariableCollection,
-    options?: BreakpointAndPseudo
+    options?: StyleOptions
   ): Promise<null>;
   /**
    * Retrieve all variable modes applied on the style.
-   * @param options - Options to get variable modes based on breakpoints and pseudo classes / states.
+   * @param options - Options to get variable modes based on breakpoints, pseudo classes / states, and component variants.
    * @example
    * ```ts
    * const modes = await myStyle.getVariableModes();
    * ```
    */
   getVariableModes(
-    options?: BreakpointAndPseudo
+    options?: StyleOptions
   ): Promise<VariableModeStylePropertyMap>;
   /**
    * Sets variable modes for the style.
    * @param props - The variable modes to set.
-   * @param options - Options to set variable modes based on breakpoints and pseudo classes / states.
+   * @param options - Options to set variable modes based on breakpoints, pseudo classes / states, and component variants.
    * @example
    * ```ts
    * await myStyle.setVariableModes({
@@ -232,12 +244,12 @@ interface Style {
    */
   setVariableModes(
     props: VariableModeStylePropertyMap,
-    options?: BreakpointAndPseudo
+    options?: StyleOptions
   ): Promise<null>;
   /**
    * Removes variable modes from the style.
    * @param modes - The variable modes to remove from the style.
-   * @param options - Options to remove variable modes based on breakpoints and pseudo classes / states.
+   * @param options - Options to remove variable modes based on breakpoints, pseudo classes / states, and component variants.
    * @example
    * ```ts
    * const collection = await webflow.getVariableCollectionById('collection-id');
@@ -248,17 +260,17 @@ interface Style {
    */
   removeVariableModes(
     modes: Array<VariableMode>,
-    options?: BreakpointAndPseudo
+    options?: StyleOptions
   ): Promise<null>;
   /**
    * Removes all variable modes from the style.
-   * @param options - Options to remove all variable modes based on breakpoints and pseudo classes / states.
+   * @param options - Options to remove all variable modes based on breakpoints, pseudo classes / states, and component variants.
    * @example
    * ```ts
    * await myStyle.removeAllVariableModes();
    * ```
    */
-  removeAllVariableModes(options?: BreakpointAndPseudo): Promise<null>;
+  removeAllVariableModes(options?: StyleOptions): Promise<null>;
   /**
    * Retrieves the parent style for a combo class and otherwise returns null.
    * @example