Fixing QA changes on Framework

docs/components/component_page.mdx.tpl

@@ -12,11 +12,11 @@ mode: "wide"
 {% if fields %}
 ## Fields
 
-<table>
+<table className="componentFields">
 	<thead>
 		<th>Name</th>
 		<th>Type</th>
-		<th>Description</th>
+		<th class="desc">Description</th>
 		<th>Options</th>
 	</thead>
 	<tbody>

docs/framework/ai-module.mdx

@@ -57,11 +57,11 @@ conversation += {"role": "user", "content": "What's the weather like?"}
 conversation.add(role="user", content="What's the weather like?")
 ```
 
-Addition to `Conversation` only works against `dict` objects that contain `"role"` and `"content"` items. Providing a `"chunk": True` flag into the object will merge it against the last message – appending `"content"` and replacing other values.
+Addition to `Conversation` only works against `dict` objects that contain `"role"` and `"content"` items. Providing a `"chunk": True` flag into the object will merge it against the last message - appending `"content"` and replacing other values.
 
 ### Completing and streaming Conversations
 
-The `complete` and `stream_complete` methods facilitate interaction with the LLM based on the accumulated messages and configuration. These methods execute calls to generate responses and return them in form of a message object, but do not alter the conversation's `messages` list, allowing you to validate or modify the output before deciding to add it to the history.
+The `complete` and `stream_complete` methods facilitate interaction with the LLM based on the accumulated messages and configuration. These methods execute calls to generate responses and return them in the form of a message object, but do not alter the conversation's `messages` list, allowing you to validate or modify the output before deciding to add it to the history.
 
 <CodeGroup>
 ```python complete

docs/framework/application-state.mdx

@@ -4,7 +4,7 @@ title: "Application state"
 
 Each session is assigned a unique application state by the Framework.
 
-## Initialising state
+## Initializing state
 
 To set the initial application state, use the `wf.init_state()` method with a dictionary argument. **All user sessions will start with a clone of this initial state**.
 
@@ -26,7 +26,7 @@ In the above example, each session begins with a `counter` at 0. As users intera
 
 To access the `counter` value in the Builder, use @{counter}.
 
-### Managing Nested State Elements
+### Managing nested state elements
 
 To include nested elements in your state, use nested dictionaries:
 
@@ -44,26 +44,26 @@ You can reference nested elements in the Builder as `@{my_app.title}`.
 
 ### Backend-only state elements
 
-By default, all of the elements in the session state are sent to the frontend.
+By default, all of the elements in the session state are sent to the front-end.
 
 <Warning> 
-All state elements are transmitted to the frontend by default, regardless of their visibility in the user interface.
+All state elements are transmitted to the front-end by default, regardless of their visibility in the user interface.
 </Warning>
 
-To keep certain state elements private (backend-only), prefix them with an underscore `_`. This is useful in several scenarios:
+To keep certain state elements private (back-end-only), prefix them with an underscore `_`. This is useful in several scenarios:
 
-1. When data synchronization to the frontend is unnecessary.
-2. When data cannot be serialized for the frontend, such as database connections.
+1. When data synchronization to the front-end is unnecessary.
+2. When data cannot be serialized for the front-end, such as database connections.
 3. When data is sensitive to the specific session and should remain confidential.
 
-These elements remain in the backend and cannot be accessed from the Builder.
+These elements remain in the back-end and cannot be accessed from the Builder.
 
 ## Handling non-standard data types
 
-The frontend cannot directly display complex data types such as Pandas dataframes or Matplotlib figures. Such objects must be serialized before being sent.
+The front-end cannot directly display complex data types such as Pandas dataframes or Matplotlib figures. Such objects must be serialized before being sent.
 
 <Tabs>
-  <Tab title="Matplotlib Figures">
+  <Tab title="Matplotlib figures">
     Matplotlib figures are converted to PNG data URLs, which can be shown using a standard _Image_ component.
 
     ```python
@@ -72,25 +72,25 @@ The frontend cannot directly display complex data types such as Pandas dataframe
     })
     ```
 
-    The element can be used in an _Image_ component in Builder by setting the source to `@{my_matplotlib_fig}`. Alternatively, as data inside a _File Download_ component.
+    The element can be used in an _Image_ component in the Builder by setting the source to `@{my_matplotlib_fig}`. Alternatively, as data inside a _File Download_ component.
   </Tab>
-  <Tab title="Plotly Graphs">
+  <Tab title="Plotly graphs">
     Plotly graphs are converted to Plotly JS specifications, using JSON. They can be used in _Plotly Graph_ components.
   </Tab>
-  <Tab title="Altair Charts">
+  <Tab title="Altair charts">
     Altair charts are converted to Vega Lite specifications, based on JSON. They can be used in _Vega Lite Chart_ components.
   </Tab>
-  <Tab title="Pandas Dataframes">
+  <Tab title="Pandas dataframes">
     Pandas dataframes are converted to JSON and can be used in _Dataframe_ components.
   </Tab>
 </Tabs>
 
 
 ## Managing files and binary data
 
-In components where Builder interfaces with external data, such as images, it often requires the use of data URLs. The source for an _Image_ component, for example, can be a standard URL or a data URL.
+In components where the Builder interfaces with external data, such as images, it often requires the use of data URLs. The source for an _Image_ component, for example, can be a standard URL or a data URL.
 
-Packing Files and Binary Data: Files and binary data can be converted to data URLs before they are sent to the frontend. Use `wf.pack_file()` and `wf.pack_bytes()` for this purpose. The `mime_type` argument, while optional, specifies the media type, helping the browser to correctly handle the data.
+Packing Files and Binary Data: Files and binary data can be converted to data URLs before they are sent to the front-end. Use `wf.pack_file()` and `wf.pack_bytes()` for this purpose. The `mime_type` argument, while optional, specifies the media type, helping the browser to correctly handle the data.
 
 ```python
 import writer as wf

docs/framework/backend-driven-ui.mdx

@@ -2,15 +2,15 @@
 title: "Backend-driven UI"
 ---
 
-Framework facilitates backend-initiated user interface modifications. These changes are made possible through **Code-Managed Components** (CMCs), distinct from *Builder-Managed Components* (BMCs). 
+Framework facilitates backend-initiated user interface modifications. These changes are made possible through **Code-Managed Components** (CMCs), distinct from the *Builder-Managed Components* (BMCs). 
 
-CMCs, unlike BMCs, are dynamically created and modified via backend code, and cannot be edited (but still can be viewed) within the application builder. It's important to also note that CMCs do not persist in your application's `ui.json` file and exist only during the application runtime, supporting dynamic UI adjustments.
+CMCs, unlike BMCs, are dynamically created and modified via back-end code, and cannot be edited (but still can be viewed) within the application builder. It's important to also note that CMCs do not persist in your application's `ui.json` file and exist only during the application runtime, supporting dynamic UI adjustments.
 
 <Note> 
 To summarise:
 
 **CMC** – Code-Managed Component 
-- created via **application backend**;
+- created via **application back-end**;
 - **cannot be edited** in builder;
 - is **not saved** to `ui.json`.
 
@@ -98,7 +98,7 @@ with ui.find(container):
 
 ### Component methods
 
-UI manager contains methods linked to each frontend component. For example, in previous code snippets we provide a `ui.Text` method, which is used for creating [Text components](https://www.streamsync.cloud/component-list.html#text).
+UI manager contains methods linked to each front-end component. For example, in previous code snippets we provide a `ui.Text` method, which is used for creating [Text components](https://www.streamsync.cloud/component-list.html#text).
 
 This method expects `content: dict` as first argument, which enables you to set the field properties of the component, through corresponding keys:
 ```python

docs/framework/builder-basics.mdx

@@ -122,7 +122,7 @@ Just like with changes to settings, these operations can be undone and redone.
 
 ## Discovering components
 
-Builder is designed to allow easy discoverability of components. Rather than scouring specifications every time you need to use a component, you can rely on the visual editor to guide you.
+The Builder is designed to allow easy discoverability of components. Rather than scouring specifications every time you need to use a component, you can rely on the visual editor to guide you.
 
 ### Short description
 

docs/framework/custom-components.mdx

@@ -8,12 +8,12 @@ They're developed using Vue 3 and TypeScript. Once transpiled, they can be used
 
 <Note> 
 Custom components behave exactly like built-in ones.
-They are just as performant, can contain other components, and offer the same Builder experience. They only differ from built-in components in the way that they're bundled and imported.
+They are just as performant, can contain other components, and offer the same the Builder experience. They only differ from built-in components in the way that they're bundled and imported.
 </Note>
 
 ## Architecture
 
-Framework frontend compiles to a collection of static assets that is distributed in the Python package. These static assets are then served via FastAPI.
+Framework front-end compiles to a collection of static assets that is distributed in the Python package. These static assets are then served via FastAPI.
 
 During initialisation time, the server scans the `extensions/` folder in the project folder and looks for `.css` and `.js` files. This folder is also served, similarly to `static/`. If it finds any valid files in `extensions/`, it shares the list with clients and tells them to dynamically import these files during runtime.
 
@@ -31,7 +31,7 @@ Dependencies are [_provided_](https://vuejs.org/api/composition-api-dependency-i
 
 A template defines how a certain component is rendered. For example, `corebutton` defines how _Button_ components are rendered.
 
-Framework component templates are purely frontend-based. **They are Vue 3 templates that extend the Vue specification** via a [custom option](https://vuejs.org/api/utility-types.html#componentcustomoptions), `writer`. This _custom option_ defines all the Framework-specific behaviour of the component. For example, its `fields` property establishes which fields will be editable via Builder.
+Framework component templates are purely front-end. **They are Vue 3 templates that extend the Vue specification** via a [custom option](https://vuejs.org/api/utility-types.html#componentcustomoptions), `writer`. This _custom option_ defines all the Framework-specific behaviour of the component. For example, its `fields` property establishes which fields will be editable via the Builder.
 
 ### Simple example
 
@@ -90,7 +90,7 @@ const fields = inject(injectionKeys.evaluatedFields);
 </style>
 ```
 
-The code above will make _Bubble Message_ available in Builder.
+The code above will make _Bubble Message_ available in the Builder.
 
 ![Custom Components - Bubble Message](./images/custom-components.bubble-message.png)
 
@@ -100,9 +100,9 @@ The code above will make _Bubble Message_ available in Builder.
 
 To get started, clone the [Framework repository](https://github.com/streamsync-cloud/streamsync) from GitHub. 
 
-To develop custom templates, at least in a developer-friendly way, you'll need a frontend development server with instant reloads.
+To develop custom templates, at least in a developer-friendly way, you'll need a front-end development server with instant reloads.
 
-The frontend code for Framework can be found in the folder `ui`. With Node and npm in your system, run `npm install` to install dependencies, and start the server with support for custom component templates using `npm run custom.dev`.
+The front-end code for Framework can be found in the folder `ui`. With Node and npm in your system, run `npm install` to install dependencies, and start the server with support for custom component templates using `npm run custom.dev`.
 
 ```sh
 cd ui
@@ -114,16 +114,16 @@ npm install
 npm run custom.dev
 ```
 
-The command above will start a frontend server, but won't be of much use by itself —a backend is needed. The frontend development server proxies backend requests to port 5000.
+The command above will start a front-end server, but won't be of much use by itself —a back-end is needed. The front-end development server proxies back-end requests to port 5000.
 
-Start Framework via command line, specifying the option `--port 5000`, to provide a backend in that port. It's recommended to create a new app for testing the template you're developing.
+Start Framework via command line, specifying the option `--port 5000`, to provide a back-end in that port. It's recommended to create a new app for testing the template you're developing.
 
 ```sh
 writer create customtester
 writer edit customtester --port 5000
 ```
 
-You should now be able to access Framework via the URL provided by Vite, e.g. `http://localhost:5174`. In Builder's _Toolkit_, you should see the sample component, _Balloon Message_. Add it to your tester application.
+You should now be able to access Framework via the URL provided by Vite, e.g. `http://localhost:5174`. In the Builder's _Toolkit_, you should see the sample component, _Balloon Message_. Add it to your tester application.
 
 ### Create a new component
 
@@ -165,7 +165,7 @@ A single or multiple templates can be specified. Take into account that they wil
 Execute `npm run custom.build`, this will generate the output `.js` and `.css` files into `ui/custom_components_dist`.
 
 ```sh
-# "build" builds the entire frontend
+# "build" builds the entire front-end
 # "custom.build" only builds the custom templates 
 
 npm run custom.build