Say "component" for the component

"Embedded" already means something here: the embedded package is the
widget build. Where a comment meant Element Call running as a React
component inside a host application, it now says so, and the params it
starts from are `componentProperties`. "Host" stays the word for the
application on the other side, whether that is a widget container or an
application rendering the component.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

component/ElementCall.module.css

@@ -17,8 +17,8 @@ they are meant to cover the page — resolve against the viewport and appear in
 the middle of the host's window rather than in the middle of the call.
 
 The clipping cuts both ways: a menu near the edge of a small container is
-trimmed rather than overflowing into the host. That is the trade being an
-embedded component makes. */
+trimmed rather than overflowing into the host. That is the trade being a
+component rather than a page makes. */
 .root {
   display: flex;
   flex-direction: column;

component/build/scopeStylesToRoot.ts

@@ -41,7 +41,7 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  *
  * As a page of its own, Element Call can style the document: normalize.css and
  * Compound speak of `html`, `body` and bare elements, and the design tokens are
- * declared on `:root`. Embedded in a host, all of that would land on the host's
+ * declared on `:root`. As a component, all of that would land on the host's
  * document too. This rewrites every selector so that it matches only the root
  * or its descendants:
  *

component/dev/Harness.tsx

@@ -83,7 +83,7 @@ interface LogEntry {
 }
 
 /**
- * One embedded Element Call, with the controls a host would have over it: the
+ * One Element Call component, with the controls a host would have over it: the
  * requests it can make of Element Call, and the ability to take it off screen
  * altogether.
  */
@@ -198,9 +198,9 @@ const HostChrome: FC = (): ReactNode => (
 );
 
 /**
- * A dialog of the host's own, over the top of the calls. Element Call embedded
- * in a host has to sit underneath this — being unable to is one of the reasons
- * for embedding it rather than putting it in an iframe.
+ * A dialog of the host's own, over the top of the calls. Element Call as a
+ * component has to sit underneath this — being unable to is one of the reasons
+ * for a component rather than an iframe.
  */
 const HostDialog: FC<{ onClose: () => void }> = ({ onClose }): ReactNode => (
   <div className={styles.dialogScrim}>
@@ -213,7 +213,7 @@ const HostDialog: FC<{ onClose: () => void }> = ({ onClose }): ReactNode => (
 );
 
 /**
- * Stands in for a host application embedding Element Call: it owns the Matrix
+ * Stands in for a host application using the Element Call component: it owns the Matrix
  * clients, the page and the space each call is given, and reaches Element Call
  * only through the component's public interface.
  *
@@ -299,8 +299,8 @@ export const Harness: FC = (): ReactNode => {
       <form className={styles.credentials} onSubmit={start}>
         <h1>Element Call component harness</h1>
         <p>
-          Signs in twice and shows Element Call embedded twice, in a page that
-          is not Element Call&apos;s own.
+          Signs in twice and shows the Element Call component twice, in a page
+          that is not Element Call&apos;s own.
         </p>
         {field("homeserver", "Homeserver")}
         {field("username", "Username")}

component/host.ts

@@ -31,8 +31,8 @@ import { useInitial } from "../src/useInitial";
 import { useLatest } from "../src/useLatest";
 
 /**
- * What Element Call tells the application embedding it. Everything is
- * optional: a host implements what it wants to hear about.
+ * What Element Call tells the application hosting it as a component.
+ * Everything is optional: a host implements what it wants to hear about.
  *
  * Compared by nothing — Element Call always calls whichever one it was most
  * recently given, so this may be written inline.

component/index.tsx

@@ -58,7 +58,7 @@ import { HostBridgeProvider } from "../src/HostBridge";
 import { RootElementProvider } from "../src/RootElementContext";
 import {
   configurationForIntent,
-  hostedProperties,
+  componentProperties,
   type UrlParams,
   UrlParamsProvider,
   UserIntent,
@@ -209,7 +209,7 @@ export const ElementCall: FC<ElementCallProps> = ({
   const stableConfig = useStableValue(config);
   const params = useMemo(
     (): UrlParams => ({
-      ...hostedProperties,
+      ...componentProperties,
       roomId,
       ...configurationForIntent(intent),
       ...stableConfig,
@@ -249,8 +249,8 @@ export const ElementCall: FC<ElementCallProps> = ({
     <I18nextProvider i18n={i18n}>
       <HostBridgeProvider value={hostBridge}>
         <UrlParamsProvider value={params}>
-          {/* Element Call's own navigation stays in memory, so that being
-          embedded cannot disturb the host's URL. */}
+          {/* Element Call's own navigation stays in memory, so that the
+          component cannot disturb the host's URL. */}
           <MemoryRouter>
             <div ref={setContainer} className={styles.root}>
               {container !== null &&