Add support for Trilist, CrComLib, WebXpanel, and Zoom integration

README.md

@@ -36,17 +36,21 @@ Use the provided hooks to link buttons and UI elements to the Mobile Control API
 ### Steps
 
 1. Install dependencies:
+
    ```bash
    npm install
    ```
 
 2. Create a local config file by copying the default:
+
    ```
    /public/_local-config/_config.default.json  →  /public/_local-config/_config.local.json
    ```
+
    Update the `apiPath` value to the IP address and port of your test processor. **Do not commit this file** — it is gitignored.
 
    Example `_config.local.json`:
+
    ```json
    {
      "apiPath": "http://192.168.1.22:50010/mc/api",
@@ -66,17 +70,21 @@ Use the provided hooks to link buttons and UI elements to the Mobile Control API
    ```
 
 3. Start the development server:
+
    ```bash
    npm run dev
    ```
 
 4. Open the printed local URL in a browser (e.g. `http://localhost:5173/mc/app`). You will see a disconnected message until a token is provided.
 
 5. Get a connection token from the Crestron processor by running the console command:
+
    ```
    mobileinfo:[programSlot]
    ```
+
    Example output:
+
    ```
     mobileadduiclient:1 room1 1234567890abcdefghijk
     mobileinfo
@@ -99,6 +107,7 @@ Use the provided hooks to link buttons and UI elements to the Mobile Control API
     Connected: False
     Duration: Not Connected
    ```
+
    Copy the token value for the client instance you want to connect to.
 
 6. Append the token to the URL and reload:
@@ -107,3 +116,101 @@ Use the provided hooks to link buttons and UI elements to the Mobile Control API
    ```
 
 Your development client will now connect to the WebSocket server running on the Crestron program.
+
+# Using this Library in an Existing Application
+
+This section covers integrating the library into an existing React app rather than developing the library itself.
+
+### 1. Install the package and its peer dependencies
+
+The library is published as `@pepperdash/mobile-control-react-app-core`. It declares `react`, `react-dom`, `react-redux`, `react-router-dom`, `@reduxjs/toolkit`, `axios`, and `lodash` as peer dependencies — install any that your app doesn't already have:
+
+```bash
+npm install @pepperdash/mobile-control-react-app-core
+npm install react react-dom react-redux react-router-dom @reduxjs/toolkit axios lodash
+```
+
+`@crestron/ch5-webxpanel` and `@pepperdash/ch5-crcomlib-lite` are regular dependencies of the library and will be installed automatically.
+
+### 2. Add the local config file
+
+The library fetches its API connection settings at runtime from `/_local-config/_config.local.json`, so your app needs its own copy of that file in its `public/` directory:
+
+```
+public/_local-config/_config.local.json
+```
+
+Use [`_config.default.json`](public/_local-config/_config.default.json) in this repo as a starting template, and set `apiPath` to your control system's Mobile Control endpoint (e.g. `http://192.168.1.22:50010/mc/api`). **Do not commit this file** — add `_config.local.json` to your `.gitignore`.
+
+### 3. Set up a router
+
+The library uses React Router hooks internally (error handling, navigation), so a router must be present in the component tree — `MobileControlProvider` alone is not sufficient. Create a `createBrowserRouter` with a `basename` matching your app's mount path and render it with `RouterProvider` **outside** `MobileControlProvider`:
+
+```tsx
+// src/main.tsx
+import '@pepperdash/mobile-control-react-app-core/style.css';
+import { ErrorBox } from '@pepperdash/mobile-control-react-app-core';
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import App from './App';
+
+const router = createBrowserRouter(
+  [{ path: '*', Component: App, errorElement: <ErrorBox /> }],
+  { basename: '/mc/app' }
+);
+
+createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);
+```
+
+See [docs/url-routing-app-dev.md](docs/url-routing-app-dev.md) for more detail, including how the library derives the token/room-key from the URL.
+
+### 4. Wrap your app in `MobileControlProvider`
+
+`MobileControlProvider` supplies the Redux store and WebSocket context every hook in this library depends on:
+
+```tsx
+// src/App.tsx
+import { MobileControlProvider } from '@pepperdash/mobile-control-react-app-core';
+import MyRoomUI from './MyRoomUI';
+
+function App() {
+  return (
+    <MobileControlProvider>
+      <MyRoomUI />
+    </MobileControlProvider>
+  );
+}
+
+export default App;
+```
+
+### 5. Request room and device state, then build your UI with hooks
+
+At (or near) the root of your UI, resolve the room key/configuration and call `useGetAllDeviceStateFromRoomConfiguration` once so device state starts flowing in. From there, use the interface hooks (`useIHasPowerControl`, `useITransport`, etc.) in individual components to read state and dispatch actions:
+
+```tsx
+import {
+  useGetAllDeviceStateFromRoomConfiguration,
+  useRoomConfiguration,
+  useRoomKey,
+} from '@pepperdash/mobile-control-react-app-core';
+
+function MyRoomUI() {
+  const roomKey = useRoomKey();
+  const config = useRoomConfiguration(roomKey);
+  useGetAllDeviceStateFromRoomConfiguration({ config });
+
+  // ...render components that use interface hooks, e.g. useIHasPowerControl(deviceKey)
+}
+```
+
+See [docs/interface-hooks-app-dev.md](docs/interface-hooks-app-dev.md) for the full hook catalog, [docs/redux-state-app-dev.md](docs/redux-state-app-dev.md) for how state is organized, and [docs/device-state-feedback-app-dev.md](docs/device-state-feedback-app-dev.md) for how feedback updates arrive.
+
+### 6. (Optional) Zoom Room Controller / WebXPanel support
+
+If your app may be loaded as a Zoom Room Controller (ZRC) device panel, the library automatically establishes a WebXPanel/CIP connection when the URL includes `?zoomRoom=true` — no additional setup is required beyond loading the app with that query parameter present.