Update "Framework" to "Writer Framework"

docs/framework/builder-basics.mdx

@@ -2,32 +2,32 @@
 title: "Builder basics"
 ---
 
-Framework Builder’s interface is an overlay on top of the running app, which allows you to edit your app while it’s running. This approach gives you an accurate representation of how the app will look and behave without the need to constantly preview it. 
+Writer Framework Builder’s interface is an overlay on top of the running app, which allows you to edit your app while it’s running. This approach gives you an accurate representation of how the app will look and behave without the need to constantly preview it. 
 
-## Framework Builder’s modes
+## Writer Framework Builder’s modes
 
-Framework Builder has two modes:
+Writer Framework Builder has two modes:
 
 1. **UI mode:** This is the default mode, which provides an overlay of tools for building and editing the user interface. The app still runs in UI mode, allowing to you test its functionality while you’re building it. You can also edit the app’s code and view its log.
 
-![Framework Builder in UI mode](/framework/images/builder-basics.ui-mode.png)
+![Writer Framework Builder in UI mode](/framework/images/builder-basics.ui-mode.png)
 
 2. **Preview mode:** This mode lets you preview the application, experiencing it almost as your end users would. The tool overlay is hidden, but you can still edit the app’s code and view its log in this mode.
 
-![Framework Builder in Preview mode](/framework/images/builder-basics.preview-mode.png)
+![Writer Framework Builder in Preview mode](/framework/images/builder-basics.preview-mode.png)
 
 You can switch between UI mode and Preview mode by using the **UI**/**Preview** selector near the upper left corner of the page.
 
-![Framework Builder’s UI/Preview selector](/framework/images/builder-basics.ui-preview-selector.png)
+![Writer Framework Builder’s UI/Preview selector](/framework/images/builder-basics.ui-preview-selector.png)
 
 
 ## Building your app in UI mode
 
 ### The different areas of UI mode
 
-In UI mode, Framework Builder’s page is divided into these areas:
+In UI mode, Writer Framework Builder’s page is divided into these areas:
 
-![Framework Builder in UI mode, with indivdual areas labeled](/framework/images/builder-basics.ui-mode-with-labels.png)
+![Writer Framework Builder in UI mode, with indivdual areas labeled](/framework/images/builder-basics.ui-mode-with-labels.png)
 
 1. **Canvas:** This is where you lay out components to build your app’s user interface. It displays the UI as your users will see it.
 2. **Core toolkit:** A “palette” of UI components that can be added to your app’s user interface. To add a component to your app’s UI, drag it onto the Canvas or into the Component tree.
@@ -38,21 +38,21 @@ In UI mode, Framework Builder’s page is divided into these areas:
 
 ### Defining your app’s user interface
 
-Framework Builder provides a selection of over 50 UI components that you can use to build your app’s user interface:
+Writer Framework Builder provides a selection of over 50 UI components that you can use to build your app’s user interface:
 
 ![Visual catalog of all the components in the Core toolkit](/framework/images/builder-basics.components.png)
 
 You define your app’s user interface by dragging components from the Core toolkit and dropping them either onto the Canvas or into the Component tree (remember, the Canvas and Component tree provide different ways to look at your app’s user interface). If you simply drag and drop a UI component onto an empty spot on the Canvas, it will be placed at the “end,” below all other UI components in the user interface. To place a UI component at a specific location, drag them over the desired location or parent component until you see the insertion lines.
 
-![Framework Builder with diagram showing how to drag and drop components from Core toolkit](/framework/images/builder-basics.drag-drop-components.png)
+![Writer Framework Builder with diagram showing how to drag and drop components from Core toolkit](/framework/images/builder-basics.drag-drop-components.png)
 
 It can sometimes be difficult to find the component you’re looking for, so the Core toolkit has a search field. You can use it to find the narrow down the list of components or find a specific one.
 
 ![Close-up of Core toolkit with instructions for using its Search text field](/framework/images/builder-basics.component-search.png)
 
 Some UI components, such as Section, can act as “parents,” which are UI components that can contain other UI components. Others, such as Text, cannot. Additionally, certain components have placement restrictions — for instance, a Column must be added to a Column Container, and a Sidebar can only be added to a Page.
 
-![Framework builder, showing parent-child relationship between a Section and the Text Input and Button components it contains](/framework/images/builder-basics.parent-components.png)
+![Writer Framework builder, showing parent-child relationship between a Section and the Text Input and Button components it contains](/framework/images/builder-basics.parent-components.png)
 
 The Component tree provides a hierarchical view of your app’s user interface. It shows the top-down layout of UI components in your app, as well as the parent-child relationships between components, making it easier to understand your app’s structure and ensure that components are correctly nested.
 
@@ -71,15 +71,15 @@ The Builder is designed to allow easy discoverability of components. Rather than
 
 To move or edit a component in your UI, you need to select it first. You can do this by clicking on the component either in the Canvas or in the Component tree. The selected component will be highlighted in both the Canvas and Component tree.
 
-![Framework Builder, with instructions to select a component by clicking on it either on the Canvas or in the Component tree](/framework/images/builder-basics.select-components.png)
+![Writer Framework Builder, with instructions to select a component by clicking on it either on the Canvas or in the Component tree](/framework/images/builder-basics.select-components.png)
 
 Selecting a UI component will allow you to view and edit its settings in the Component settings panel on the right side of the page.
 
-![Framework Builder, with Component settings panel on display, and instructions to hide the panel](/framework/images/builder-basics.component-settings.png)
+![Writer Framework Builder, with Component settings panel on display, and instructions to hide the panel](/framework/images/builder-basics.component-settings.png)
 
 To hide the Component settings panel to get a better view of the Canvas, click on **»** in the button bar. To show the panel, click on **⚙** in the button bar.
 
-![Framework Builder, with Component settings panel hidden, and instructions to show the panel](/framework/images/builder-basics.component-settings-show.png)
+![Writer Framework Builder, with Component settings panel hidden, and instructions to show the panel](/framework/images/builder-basics.component-settings-show.png)
 
 The settings in the Component settings panel are divided into the following sections:
 
@@ -115,7 +115,7 @@ The settings in the Component settings panel are divided into the following sect
 
     The **Events** section lists all the events generated by the selected component, with the option of setting event handlers for them. For example, one of the events that the Text Input component generates is the `wf-change` event, which occurs whenever the user changes the contents of the component. 
 
-    For more about event handlers, consult the [_Event handlers_](/framework/event-handlers) section of the Framework documentation.
+    For more about event handlers, consult the [_Event handlers_](/framework/event-handlers) section of the Writer Framework documentation.
   </Accordion>
   <Accordion title="Visibility">
     ![Component settings panel, with Visibility settings highlighted](/framework/images/builder-basics.visibility.png)
@@ -151,29 +151,29 @@ The shortcuts are:
 
 ### The Code editor and the Log
 
-Framework Builder provides a built-in Code editor for the `main.py` file, which defines the behavior of the app. You can toggle the Code panel by clicking the **Code** control near the lower left corner of the page:
+Writer Framework Builder provides a built-in Code editor for the `main.py` file, which defines the behavior of the app. You can toggle the Code panel by clicking the **Code** control near the lower left corner of the page:
 
-![Framework Builder, with the Code editor displayed](/framework/images/builder-basics.code.png)
+![Writer Framework Builder, with the Code editor displayed](/framework/images/builder-basics.code.png)
 
 Any changes made to the code do not take effect until you click the **Save and run** button, located at the upper right corner of the code editor.
 
 The log is a useful debugging tool that displays any messages sent to standard output via the `print()` function, as well as any error messages. You can toggle the Log panel by clicking the **Log** control near the lower right corner of the page:
 
-![Framework Builder, with the Log editor displayed](/framework/images/builder-basics.log.png)
+![Writer Framework Builder, with the Log editor displayed](/framework/images/builder-basics.log.png)
 
 Note that both the Code editor and Log panes can be displayed at the same time:
 
-![Framework Builder, with the Code editor and Log displayed at the same time](/framework/images/builder-basics.code-and-log.png)
+![Writer Framework Builder, with the Code editor and Log displayed at the same time](/framework/images/builder-basics.code-and-log.png)
 
 
 ## Testing your app in Preview mode
 
 In Preview mode, the overlays that let you build the user interface — the Core toolkit, Component tree, and Component settings — are invisible and unavailable. You see the app _almost_ as your users would see it; the Top bar and Bottom bar, which your users would not see, are still available to you in Preview mode.
 
-![Framework Builder in preview mode](/framework/images/builder-basics.preview.png)
+![Writer Framework Builder in preview mode](/framework/images/builder-basics.preview.png)
 
 You can still use the Code editor and Log in Preview mode:
 
-![Framework Builder in preview mod, with the Code editor and Log displayed at the same time](/framework/images/builder-basics.preview-code-and-log.png)
+![Writer Framework Builder in Preview mode, with the Code editor and Log displayed at the same time](/framework/images/builder-basics.preview-code-and-log.png)