@webflow/designer-extension-typings 2.0.3 → 2.0.6

package/api.d.ts

@@ -68,6 +68,18 @@ interface WebflowApi {
    * ```
    */
   getMediaQuery(): Promise<BreakpointId>;
+
+  /**
+   * Get the current pseudo mode.
+   * @returns A Promise that resolves to a PseudoStateKey which is a string representing the current pseudo mode.
+   * @example
+   * ```ts
+   * const pseudoMode = await webflow.getPseudoMode();
+   * console.log('Current Pseudo Mode:', pseudoMode);
+   * ```
+   */
+  getPseudoMode(): Promise<null | PseudoStateKey>;
+
   /**
    * Create a component by promoting a Root Element.
    * @param name - The name of the component.
@@ -312,10 +324,11 @@ interface WebflowApi {
    * webflow.notify({ type: 'Info', message: 'Great work!' }); // General notification
    * webflow.notify({ type: 'Error', message: 'Something went wrong, try again!' }); // Error notification
    * webflow.notify({ type: 'Success', message: 'Successfully did something!' }); // Success notification
+   * webflow.notify({ type: 'Warning', message: 'Something is not right, please check again!' }); // Warning notification
    * ```
    */
   notify(opts: {
-    type: 'Error' | 'Info' | 'Success';
+    type: 'Error' | 'Info' | 'Success' | 'Warning';
     message: string;
   }): Promise<void>;
   /**
@@ -411,6 +424,11 @@ interface WebflowApi {
 
   subscribe(event: 'currentappmode', callback: () => void): Unsubscribe;
 
+  subscribe(
+    event: 'pseudomode',
+    callback: (pseudoMode: null | PseudoStateKey) => void
+  ): Unsubscribe;
+
   getIdToken(): Promise<string>;
   getAppSubscriptions(): Promise<Array<AppSubscription>>;
   elementPresets: ElementPresets;
@@ -493,6 +511,14 @@ interface WebflowApi {
    */
   appModes: {[key in AppMode]: AppMode};
 
+  /**
+   * Closes the extension
+   * ```ts
+   * await webflow.closeExtension();
+   * ```
+   */
+  closeExtension(): Promise<null>;
+
   /**
    * Gets the current App connection
    * ```ts
@@ -508,6 +534,14 @@ interface WebflowApi {
    * ```
    */
   getCurrentAppConnectionResource(): Promise<null | AppConnectionResource>;
+
+  /**
+   * Gets the current App launch context (i.e how the app was launched)
+   * ```ts
+   * const launchContext = await webflow.getLaunchContext();
+   * ```
+   */
+  getLaunchContext(): Promise<null | LaunchContext>;
 }
 
 type Unsubscribe = () => void;

package/app-connections.d.ts

@@ -2,3 +2,8 @@ type AppConnectionResource = {
   type: 'Element';
   value: AnyElement;
 };
+
+type LaunchContext = {
+  type: 'AppConnection' | 'AppIntent' | 'DeepLink';
+  value: null | string | {[key in 'form' | 'image']?: 'create' | 'manage'};
+};

package/element-presets-generated.d.ts

@@ -3,6 +3,7 @@
 type ElementPresets = {
   Animation: ElementPreset<AnyElement>;
   Spline: ElementPreset<AnyElement>;
+  Rive: ElementPreset<AnyElement>;
   SearchForm: ElementPreset<AnyElement>;
   DOM: ElementPreset<DOMElement>;
   DivBlock: ElementPreset<BlockElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webflow/designer-extension-typings",
-  "version": "2.0.3",
+  "version": "2.0.6",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Typings for the Webflow Designer Extension API",
   "main": "",

package/styles-generated.d.ts

@@ -14,13 +14,13 @@ type PropertyMap = {
   'animation-play-state'?: string;
   'animation-timing-function'?: string;
   appearance?: string;
-  'backdrop-filter'?: string;
+  'backdrop-filter'?: string | SizeVariable;
   'backface-visibility'?: string;
   'background-attachment'?: string;
   'background-blend-mode'?: string;
   'background-clip'?: string;
   'background-color'?: string | ColorVariable;
-  'background-image'?: string;
+  'background-image'?: string | ColorVariable;
   'background-origin'?: string;
   'background-position'?: string;
   'background-position-x'?: string | SizeVariable;
@@ -35,11 +35,12 @@ type PropertyMap = {
   'border-block-start-style'?: string;
   'border-block-start-width'?: string | SizeVariable;
   'border-bottom-color'?: string | ColorVariable;
-  'border-bottom-left-radius'?: string | SizeVariable;
-  'border-bottom-right-radius'?: string | SizeVariable;
+  'border-bottom-left-radius'?: string | SizeVariable | PercentageVariable;
+  'border-bottom-right-radius'?: string | SizeVariable | PercentageVariable;
   'border-bottom-style'?: string;
   'border-bottom-width'?: string | SizeVariable;
   'border-collapse'?: string;
+  'border-color'?: string | ColorVariable;
   'border-end-end-radius'?: string | SizeVariable;
   'border-end-start-radius'?: string | SizeVariable;
   'border-image-outset'?: string | SizeVariable;
@@ -56,18 +57,20 @@ type PropertyMap = {
   'border-left-color'?: string | ColorVariable;
   'border-left-style'?: string;
   'border-left-width'?: string | SizeVariable;
+  'border-radius'?: string | SizeVariable | PercentageVariable;
   'border-right-color'?: string | ColorVariable;
   'border-right-style'?: string;
   'border-right-width'?: string | SizeVariable;
   'border-start-end-radius'?: string | SizeVariable;
   'border-start-start-radius'?: string | SizeVariable;
   'border-top-color'?: string | ColorVariable;
-  'border-top-left-radius'?: string | SizeVariable;
-  'border-top-right-radius'?: string | SizeVariable;
+  'border-top-left-radius'?: string | SizeVariable | PercentageVariable;
+  'border-top-right-radius'?: string | SizeVariable | PercentageVariable;
   'border-top-style'?: string;
   'border-top-width'?: string | SizeVariable;
-  bottom?: string | SizeVariable;
-  'box-shadow'?: string;
+  'border-width'?: string | SizeVariable;
+  bottom?: string | SizeVariable | PercentageVariable;
+  'box-shadow'?: string | SizeVariable;
   'box-sizing'?: string;
   'break-after'?: string;
   'break-before'?: string;
@@ -99,11 +102,11 @@ type PropertyMap = {
   fill?: string;
   'fill-opacity'?: string;
   'fill-rule'?: string;
-  filter?: string;
-  'flex-basis'?: string | SizeVariable;
+  filter?: string | SizeVariable;
+  'flex-basis'?: string | SizeVariable | PercentageVariable;
   'flex-direction'?: string;
-  'flex-grow'?: string;
-  'flex-shrink'?: string;
+  'flex-grow'?: string | NumberVariable;
+  'flex-shrink'?: string | NumberVariable;
   'flex-wrap'?: string;
   float?: string;
   'flood-color'?: string | ColorVariable;
@@ -111,7 +114,7 @@ type PropertyMap = {
   'font-family'?: string | FontFamilyVariable;
   'font-kerning'?: string;
   'font-optical-sizing'?: string;
-  'font-size'?: string | SizeVariable;
+  'font-size'?: string | SizeVariable | PercentageVariable;
   'font-stretch'?: string;
   'font-style'?: string;
   'font-variant-alternates'?: string;
@@ -119,20 +122,20 @@ type PropertyMap = {
   'font-variant-east-asian'?: string;
   'font-variant-ligatures'?: string;
   'font-variant-numeric'?: string;
-  'font-weight'?: string;
+  'font-weight'?: string | NumberVariable;
   'grid-auto-columns'?: string;
   'grid-auto-flow'?: string;
   'grid-auto-rows'?: string;
   'grid-column-end'?: string;
-  'grid-column-gap'?: string;
+  'grid-column-gap'?: string | SizeVariable | PercentageVariable;
   'grid-column-start'?: string;
   'grid-row-end'?: string;
-  'grid-row-gap'?: string | SizeVariable;
+  'grid-row-gap'?: string | SizeVariable | PercentageVariable;
   'grid-row-start'?: string;
   'grid-template-areas'?: string;
   'grid-template-columns'?: string;
   'grid-template-rows'?: string;
-  height?: string | SizeVariable;
+  height?: string | SizeVariable | PercentageVariable;
   'image-orientation'?: string;
   'image-rendering'?: string;
   'inline-size'?: string | SizeVariable;
@@ -144,34 +147,34 @@ type PropertyMap = {
   'justify-content'?: string;
   'justify-items'?: string;
   'justify-self'?: string;
-  left?: string | SizeVariable;
+  left?: string | SizeVariable | PercentageVariable;
   'letter-spacing'?: string | SizeVariable;
   'lighting-color'?: string | ColorVariable;
   'line-break'?: string;
-  'line-height'?: string | SizeVariable;
+  'line-height'?: string | SizeVariable | NumberVariable | PercentageVariable;
   'list-style-image'?: string;
   'list-style-position'?: string;
   'list-style-type'?: string;
   'margin-block-end'?: string | SizeVariable;
   'margin-block-start'?: string | SizeVariable;
-  'margin-bottom'?: string | SizeVariable;
+  'margin-bottom'?: string | SizeVariable | PercentageVariable;
   'margin-inline-end'?: string | SizeVariable;
   'margin-inline-start'?: string | SizeVariable;
-  'margin-left'?: string | SizeVariable;
-  'margin-right'?: string | SizeVariable;
-  'margin-top'?: string | SizeVariable;
+  'margin-left'?: string | SizeVariable | PercentageVariable;
+  'margin-right'?: string | SizeVariable | PercentageVariable;
+  'margin-top'?: string | SizeVariable | PercentageVariable;
   'marker-end'?: string;
   'marker-mid'?: string;
   'marker-start'?: string;
   'mask-type'?: string;
   'max-block-size'?: string | SizeVariable;
-  'max-height'?: string | SizeVariable;
+  'max-height'?: string | SizeVariable | PercentageVariable;
   'max-inline-size'?: string | SizeVariable;
-  'max-width'?: string | SizeVariable;
+  'max-width'?: string | SizeVariable | PercentageVariable;
   'min-block-size'?: string | SizeVariable;
-  'min-height'?: string | SizeVariable;
+  'min-height'?: string | SizeVariable | PercentageVariable;
   'min-inline-size'?: string | SizeVariable;
-  'min-width'?: string | SizeVariable;
+  'min-width'?: string | SizeVariable | PercentageVariable;
   'mix-blend-mode'?: string;
   'object-fit'?: string;
   'object-position'?: string;
@@ -179,7 +182,7 @@ type PropertyMap = {
   'offset-distance'?: string | SizeVariable;
   'offset-path'?: string;
   'offset-rotate'?: string;
-  opacity?: string;
+  opacity?: string | NumberVariable | PercentageVariable;
   order?: string;
   'outline-color'?: string | ColorVariable;
   'outline-offset'?: string | SizeVariable;
@@ -192,12 +195,12 @@ type PropertyMap = {
   'overscroll-behavior-inline'?: string;
   'padding-block-end'?: string | SizeVariable;
   'padding-block-start'?: string | SizeVariable;
-  'padding-bottom'?: string | SizeVariable;
+  'padding-bottom'?: string | SizeVariable | PercentageVariable;
   'padding-inline-end'?: string | SizeVariable;
   'padding-inline-start'?: string | SizeVariable;
-  'padding-left'?: string | SizeVariable;
-  'padding-right'?: string | SizeVariable;
-  'padding-top'?: string | SizeVariable;
+  'padding-left'?: string | SizeVariable | PercentageVariable;
+  'padding-right'?: string | SizeVariable | PercentageVariable;
+  'padding-top'?: string | SizeVariable | PercentageVariable;
   'paint-order'?: string;
   perspective?: string | SizeVariable;
   'perspective-origin'?: string;
@@ -205,7 +208,7 @@ type PropertyMap = {
   position?: string;
   r?: string | SizeVariable;
   resize?: string;
-  right?: string | SizeVariable;
+  right?: string | SizeVariable | PercentageVariable;
   rotate?: string;
   'row-gap'?: string | SizeVariable;
   rx?: string | SizeVariable;
@@ -247,13 +250,13 @@ type PropertyMap = {
   'text-emphasis-color'?: string | ColorVariable;
   'text-emphasis-position'?: string;
   'text-emphasis-style'?: string;
-  'text-indent'?: string | SizeVariable;
+  'text-indent'?: string | SizeVariable | PercentageVariable;
   'text-overflow'?: string;
   'text-rendering'?: string;
-  'text-shadow'?: string;
+  'text-shadow'?: string | SizeVariable;
   'text-transform'?: string;
   'text-underline-position'?: string;
-  top?: string | SizeVariable;
+  top?: string | SizeVariable | PercentageVariable;
   'touch-action'?: string;
   transform?: string;
   'transform-origin'?: string;
@@ -268,14 +271,14 @@ type PropertyMap = {
   'vertical-align'?: string;
   visibility?: string;
   'white-space'?: string;
-  width?: string | SizeVariable;
+  width?: string | SizeVariable | PercentageVariable;
   'will-change'?: string;
   'word-break'?: string;
   'word-spacing'?: string | SizeVariable;
   'writing-mode'?: string;
   x?: string | SizeVariable;
   y?: string | SizeVariable;
-  'z-index'?: string;
+  'z-index'?: string | NumberVariable;
   '-webkit-line-clamp'?: string;
   '-webkit-text-fill-color'?: string | ColorVariable;
   '-webkit-text-stroke-color'?: string | ColorVariable;
@@ -322,6 +325,7 @@ type StyleProperty =
   | 'border-bottom-style'
   | 'border-bottom-width'
   | 'border-collapse'
+  | 'border-color'
   | 'border-end-end-radius'
   | 'border-end-start-radius'
   | 'border-image-outset'
@@ -338,6 +342,7 @@ type StyleProperty =
   | 'border-left-color'
   | 'border-left-style'
   | 'border-left-width'
+  | 'border-radius'
   | 'border-right-color'
   | 'border-right-style'
   | 'border-right-width'
@@ -348,6 +353,7 @@ type StyleProperty =
   | 'border-top-right-radius'
   | 'border-top-style'
   | 'border-top-width'
+  | 'border-width'
   | 'bottom'
   | 'box-shadow'
   | 'box-sizing'
@@ -562,3 +568,21 @@ type StyleProperty =
   | '-webkit-text-fill-color'
   | '-webkit-text-stroke-color'
   | '-webkit-text-stroke-width';
+
+type PseudoStateKey =
+  | 'noPseudo'
+  | 'nth-child(odd)'
+  | 'nth-child(even)'
+  | 'first-child'
+  | 'last-child'
+  | 'hover'
+  | 'active'
+  | 'pressed'
+  | 'visited'
+  | 'focus'
+  | 'focus-visible'
+  | 'focus-within'
+  | 'placeholder'
+  | 'empty'
+  | 'before'
+  | 'after';

package/styles.d.ts

@@ -100,21 +100,3 @@ type BreakpointId =
   | 'medium'
   | 'small'
   | 'tiny';
-
-type PseudoStateKey =
-  | 'noPseudo'
-  | 'nth-child(odd)'
-  | 'nth-child(even)'
-  | 'first-child'
-  | 'last-child'
-  | 'hover'
-  | 'active'
-  | 'pressed'
-  | 'visited'
-  | 'focus'
-  | 'focus-visible'
-  | 'focus-within'
-  | 'placeholder'
-  | 'empty'
-  | 'before'
-  | 'after';

package/variables.d.ts

@@ -2,13 +2,13 @@ interface ColorVariable {
   readonly id: VariableId;
   readonly type: 'Color';
   /**
-   * Get a list of all variables associated with a collection.
+   * Get the variable's name.
    * @returns A Promise that resolves into a the Variable Name.
    * @example
    * ```ts
    * const collection = await webflow.getDefaultVariableCollection();
-   * const variable = collection.getVariable('id-123')
-   * const variableName = variable.getName()
+   * const variable = await collection.getVariable('id-123')
+   * const variableName = await variable.getName()
    * ```
    */
   getName(): Promise<string>;
@@ -51,7 +51,7 @@ interface ColorVariable {
    * @example
    * ```ts
    * const newVariable1 = await collection.createColorVariable('myvar4', 'red')
-   * newVariable1.remove()
+   * await newVariable1.remove()
    * ```
    */
   remove(): Promise<boolean>;
@@ -61,13 +61,13 @@ interface SizeVariable {
   readonly id: VariableId;
   readonly type: 'Size';
   /**
-   * Get a list of all variables associated with a collection.
+   * Get the variable's name.
    * @returns A Promise that resolves into a the Variable Name.
    * @example
    * ```ts
    * const collection = await webflow.getDefaultVariableCollection();
-   * const variable = collection.getVariable('id-123')
-   * const variableName = variable.getName()
+   * const variable = await collection.getVariable('id-123')
+   * const variableName = await variable.getName()
    * ```
    */
   getName(): Promise<string>;
@@ -110,7 +110,134 @@ interface SizeVariable {
    * @example
    * ```ts
    * const newVariable1 = await collection.createColorVariable('myvar4', 'red')
-   * newVariable1.remove()
+   * await newVariable1.remove()
+   * ```
+   */
+  remove(): Promise<boolean>;
+}
+
+interface NumberVariable {
+  readonly id: VariableId;
+  readonly type: 'Number';
+
+  /**
+   * Get the variable's name.
+   * @returns A Promise that resolves into the Variable Name.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableName = await variable.getName()
+   * ```
+   */
+  getName(): Promise<string>;
+
+  /**
+   * Set the variable's name.
+   * @param newName - The desired name of the variable.
+   * @returns A Promise that resolves once the name is successfully set.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const numberVariable = await collection.getVariableByName("number");
+   * await numberVariable.setName("My Number Variable");
+   * ```
+   */
+  setName(newName: string): Promise<null>;
+
+  /**
+   * Set the value of the variable. The value must be of the same type as the value of the instantiated variable.
+   * @param value - The desired value of the variable.
+   * @returns A Promise that resolves once the value is successfully set.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createNumberVariable('myvar1', 100});
+   * await newVariable.set(200);
+   * ```
+   */
+  set(value: NumberValue | NumberVariable): Promise<null>;
+
+  /**
+   * Get the variable’s value.
+   * @returns A Promise that resolves into the variable's number value, or if the variable is an alias - the original Variable.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createNumberVariable('myvar1', 100);
+   * console.log(await newVariable.get());
+   * ```
+   */
+  get(): Promise<NumberValue | NumberVariable>;
+
+  /**
+   * Removes the variable from the default collection.
+   * @returns A Promise that resolves into a boolean indicating whether deleting the variable was successful.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createNumberVariable('myvar1', 100);
+   * await newVariable.remove();
+   * ```
+   */
+  remove(): Promise<boolean>;
+}
+
+interface PercentageVariable {
+  readonly id: VariableId;
+  readonly type: 'Percentage';
+  /**
+   * Get the variable's name.
+   * @returns A Promise that resolves into the Variable Name.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const variable = await collection.getVariable('id-123')
+   * const variableName = await variable.getName()
+   * ```
+   */
+  getName(): Promise<string>;
+
+  /**
+   * Set the variable's name.
+   * @param newName - The desired name of the variable.
+   * @returns A Promise that resolves once the name is successfully set.
+   * @example
+   * ```ts
+   * const collection = await webflow.getDefaultVariableCollection();
+   * const percentageVariable = await collection.getVariableByName("percentage");
+   * await percentageVariable.setName("My Percentage Variable");
+   * ```
+   */
+  setName(newName: string): Promise<null>;
+
+  /**
+   * Set the value of the variable. The value must be of the same type as the value of the instantiated variable.
+   * @param value - The desired value of the variable.
+   * @returns A Promise that resolves once the value is successfully set.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createPercentageVariable('myvar1', 100);
+   * await newVariable.set(50);
+   * ```
+   */
+  set(value: PercentageValue | PercentageVariable): Promise<null>;
+
+  /**
+   * Get the variable’s value.
+   * @returns A Promise that resolves into the variable's value, or if the variable is an alias - the original Variable.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createPercentageVariable('myvar1', 100);
+   * console.log(await newVariable.get());
+   * ```
+   */
+  get(): Promise<PercentageValue | PercentageVariable>;
+
+  /**
+   * Removes the variable from the default collection.
+   * @returns A Promise that resolves into a boolean indicating whether deleting the variable was successful.
+   * @example
+   * ```ts
+   * const newVariable = await collection.createPercentageVariable('myvar1', 100);
+   * await newVariable.remove();
    * ```
    */
   remove(): Promise<boolean>;
@@ -120,13 +247,13 @@ interface FontFamilyVariable {
   readonly id: VariableId;
   readonly type: 'FontFamily';
   /**
-   * Get a list of all variables associated with a collection.
+   * Get the variable's name.
    * @returns A Promise that resolves into a the Variable Name.
    * @example
    * ```ts
    * const collection = await webflow.getDefaultVariableCollection();
-   * const variable = collection.getVariable('id-123')
-   * const variableName = variable.getName()
+   * const variable = await collection.getVariable('id-123')
+   * const variableName = await variable.getName()
    * ```
    */
   getName(): Promise<string>;
@@ -169,13 +296,18 @@ interface FontFamilyVariable {
    * @example
    * ```ts
    * const newVariable1 = await collection.createColorVariable('myvar4', 'red')
-   * newVariable1.remove()
+   * await newVariable1.remove()
    * ```
    */
   remove(): Promise<boolean>;
 }
 
-type Variable = ColorVariable | SizeVariable | FontFamilyVariable;
+type Variable =
+  | ColorVariable
+  | SizeVariable
+  | FontFamilyVariable
+  | NumberVariable
+  | PercentageVariable;
 
 interface VariableCollection {
   readonly id: VariableCollectionId;
@@ -191,6 +323,14 @@ interface VariableCollection {
     name: string,
     value: SizeValue | SizeVariable
   ): Promise<SizeVariable>;
+  createNumberVariable(
+    name: string,
+    value: number | NumberVariable
+  ): Promise<NumberVariable>;
+  createPercentageVariable(
+    name: string,
+    value: number | PercentageVariable
+  ): Promise<PercentageVariable>;
   createFontFamilyVariable(
     name: string,
     value: string | FontFamilyVariable
@@ -202,6 +342,8 @@ type VariableId = string;
 type ColorValue = string;
 type SizeValue = {value: number; unit: SizeUnit};
 type FontFamilyValue = string;
+type NumberValue = number;
+type PercentageValue = number;
 
 type SizeUnit =
   | 'px'