@webflow/designer-extension-typings 2.0.35 → 2.1.0

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,10 @@ 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>;
   getProps(): Promise<Array<InstancePropSummary>>;
   getResolvedProps(): Promise<Array<ResolvedInstanceProp>>;
   searchProps(

package/package.json

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

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.