@opalkelly/frontpanel-react-components 0.4.0 → 0.5.0

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@opalkelly/frontpanel-react-components",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "React Component Library for OpalKelly FrontPanel application development",
+  "private": false,
   "keywords": [
     "FPGA",
     "FrontPanel",
@@ -42,16 +43,16 @@
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.5",
-    "@storybook/addon-essentials": "^8.1.6",
-    "@storybook/addon-interactions": "^8.1.6",
-    "@storybook/addon-links": "^8.1.6",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.3",
-    "@storybook/blocks": "^8.1.6",
-    "@storybook/manager-api": "^8.1.6",
-    "@storybook/react": "^8.1.6",
-    "@storybook/react-webpack5": "^8.1.6",
-    "@storybook/test": "^8.1.6",
-    "@storybook/theming": "^8.1.6",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/addon-interactions": "^8.6.4",
+    "@storybook/addon-links": "^8.6.4",
+    "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/manager-api": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@storybook/react-webpack5": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/theming": "^8.6.4",
     "@types/react": "^18.2.45",
     "@typescript-eslint/eslint-plugin": "^7.1.1",
     "@typescript-eslint/parser": "^7.1.1",
@@ -64,12 +65,12 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "storybook": "^8.1.6",
+    "storybook": "^8.6.4",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@opalkelly/frontpanel-platform-api": "^0.4.0",
+    "@opalkelly/frontpanel-platform-api": "^0.5.0",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-slider": "^1.1.2",

package/src/components/FrontPanel/FrontPanel.props.ts

@@ -6,16 +6,16 @@
  */
 
 import {
-    IFrontPanel,
-    IFrontPanelEventSource,
+    IFPGADataPortClassic,
+    IFPGADataPortClassicEventSource,
     WorkQueue
 } from "@opalkelly/frontpanel-platform-api";
 
 interface FrontPanelProps extends React.PropsWithChildren<NonNullable<unknown>> {
     /**
-     * The front panel device to be used
+     * The FPGA data port to be used
      */
-    device?: IFrontPanel;
+    fpgaDataPort?: IFPGADataPortClassic;
     /**
      * Optional work queue to be used
      */
@@ -23,7 +23,7 @@ interface FrontPanelProps extends React.PropsWithChildren<NonNullable<unknown>>
     /**
      * Optional event source to be used
      */
-    eventSource?: IFrontPanelEventSource;
+    eventSource?: IFPGADataPortClassicEventSource;
 }
 
 export { FrontPanelProps };

package/src/components/FrontPanel/FrontPanel.tsx

@@ -12,11 +12,11 @@ import { FrontPanelProps } from "./FrontPanel.props";
 import { FrontPanelContext } from "../../contexts";
 
 const FrontPanel: React.FC<FrontPanelProps> = (props) => {
-    const { device, workQueue, eventSource } = props;
+    const { fpgaDataPort, workQueue, eventSource } = props;
 
     return (
         <FrontPanelContext.Provider
-            value={{ device: device, workQueue: workQueue, eventSource: eventSource }}>
+            value={{ fpgaDataPort: fpgaDataPort, workQueue: workQueue, eventSource: eventSource }}>
             {props.children}
         </FrontPanelContext.Provider>
     );

package/src/components/FrontPanelIndicator/FrontPanelIndicator.tsx

@@ -13,7 +13,7 @@ import FrontPanelIndicatorProps from "./FrontPanelIndicator.props";
 
 import { FrontPanelContext } from "../../contexts";
 
-import { IFrontPanel } from "@opalkelly/frontpanel-platform-api";
+import { IFPGADataPortClassic } from "@opalkelly/frontpanel-platform-api";
 
 type FrontPanelIndicatorElement = React.ElementRef<typeof Indicator>;
 
@@ -45,14 +45,14 @@ const FrontPanelIndicator = React.forwardRef<
 >((props, forwardedRef) => {
     const [bitValue, setBitValue] = React.useState<boolean>(false);
 
-    const { device, workQueue, eventSource } = React.useContext(FrontPanelContext);
+    const { fpgaDataPort, workQueue, eventSource } = React.useContext(FrontPanelContext);
 
     const { fpEndpoint, ...rootProps } = props;
 
     const targetWireBitMask = 1 << fpEndpoint.bitOffset;
 
     const onUpdateWireValue = React.useCallback(
-        (sender?: IFrontPanel): void => {
+        (sender?: IFPGADataPortClassic): void => {
             if ((sender != null) && (workQueue != null)) {
                 const sourceWireValue = sender.getWireOutValue(fpEndpoint.epAddress);
                 const sourceBitValue = (sourceWireValue & targetWireBitMask) === targetWireBitMask;
@@ -65,14 +65,14 @@ const FrontPanelIndicator = React.forwardRef<
     );
 
     React.useEffect(() => {
-        onUpdateWireValue(device);
+        onUpdateWireValue(fpgaDataPort);
 
         const subscription = eventSource?.wireOutValuesChangedEvent.subscribe(onUpdateWireValue);
 
         return () => {
             subscription?.cancel();
         };
-    }, [device, eventSource, onUpdateWireValue]);
+    }, [fpgaDataPort, eventSource, onUpdateWireValue]);
 
     return <Indicator {...rootProps} ref={forwardedRef} state={bitValue} />;
 });

package/src/components/FrontPanelNumberDisplay/FrontPanelNumberDisplay.tsx

@@ -17,7 +17,7 @@ import { FrontPanelContext } from "../../contexts";
 
 import { CalculateBitLength } from "../../core";
 
-import { IFrontPanel, WIREOUT_ADDRESS_RANGE } from "@opalkelly/frontpanel-platform-api";
+import { IFPGADataPortClassic, WIREOUT_ADDRESS_RANGE } from "@opalkelly/frontpanel-platform-api";
 
 type FrontPanelNumberDisplayElement = React.ElementRef<typeof NumberDisplay>;
 
@@ -54,7 +54,7 @@ const FrontPanelNumberDisplay = React.forwardRef<
 >((props, forwardedRef) => {
     const [value, setValue] = React.useState<bigint>(0n);
 
-    const { device, workQueue, eventSource } = React.useContext(FrontPanelContext);
+    const { fpgaDataPort, workQueue, eventSource } = React.useContext(FrontPanelContext);
 
     const { maximumValue, fpEndpoint, ...rootProps } = props;
 
@@ -66,7 +66,7 @@ const FrontPanelNumberDisplay = React.forwardRef<
         ((1n << BigInt(targetBitLength)) - 1n) << BigInt(fpEndpoint.bitOffset);
 
     const onUpdateWireValue = React.useCallback(
-        (sender?: IFrontPanel): void => {
+        (sender?: IFPGADataPortClassic): void => {
             if ((sender != null) && (workQueue != null)) {
                 // Get the wire value for the endpoint
                 let sourceWireValue = sender.getWireOutValue(fpEndpoint.epAddress);
@@ -106,14 +106,14 @@ const FrontPanelNumberDisplay = React.forwardRef<
     );
 
     React.useEffect(() => {
-        onUpdateWireValue(device);
+        onUpdateWireValue(fpgaDataPort);
 
         const subscription = eventSource?.wireOutValuesChangedEvent.subscribe(onUpdateWireValue);
 
         return () => {
             subscription?.cancel();
         };
-    }, [device, eventSource, onUpdateWireValue]);
+    }, [fpgaDataPort, eventSource, onUpdateWireValue]);
 
     return (
         <NumberDisplay

package/src/components/FrontPanelNumberEntry/FrontPanelNumberEntry.stories.tsx

@@ -64,10 +64,8 @@ export const Primary: Story = {
     render: (props) => {
         const { device, workQueue } = useContext(FrontPanelContext);
 
-        const setWireInPromises: Promise<void>[] = [];
-
         // Initialize the WireIns with unique values.
-        workQueue.Post(async (): Promise<void> => {
+        workQueue?.post(async (): Promise<void> => {
             let byteId = 0;
 
             for (let address = 0x0; address < 0x20; address++) {
@@ -75,11 +73,10 @@ export const Primary: Story = {
                 for (let byteIndex = 1; byteIndex < 4; byteIndex++) {
                     wireValue |= byteId++ << (8 * byteIndex);
                 }
-                setWireInPromises.push(device.setWireInValue(address, wireValue, 0xffffffff));
+                device?.setWireInValue(address, wireValue, 0xffffffff);
             }
 
-            await Promise.all(setWireInPromises);
-            await device.updateWireIns();
+            await device?.updateWireIns();
         });
 
         return <FrontPanelNumberEntry {...props} />;

package/src/components/FrontPanelNumberEntry/FrontPanelNumberEntry.tsx

@@ -17,7 +17,7 @@ import { FrontPanelContext } from "../../contexts";
 
 import { CalculateBitLength } from "../../core";
 
-import { IFrontPanel, WIREIN_ADDRESS_RANGE } from "@opalkelly/frontpanel-platform-api";
+import { IFPGADataPortClassic, WIREIN_ADDRESS_RANGE } from "@opalkelly/frontpanel-platform-api";
 
 type FrontPanelNumberEntryElement = React.ElementRef<typeof NumberEntry>;
 
@@ -54,7 +54,7 @@ const FrontPanelNumberEntry = React.forwardRef<
 >((props, forwardedRef) => {
     const [value, setValue] = React.useState<bigint>(props.minimumValue ?? 0n);
 
-    const { device, workQueue } = React.useContext(FrontPanelContext);
+    const { fpgaDataPort, workQueue } = React.useContext(FrontPanelContext);
 
     const { maximumValue, minimumValue, fpEndpoint, disabled, ...rootProps } = props;
 
@@ -72,7 +72,7 @@ const FrontPanelNumberEntry = React.forwardRef<
         ((1n << BigInt(targetBitLength)) - 1n) << BigInt(fpEndpoint.bitOffset);
 
     const onUpdateWireValue = React.useCallback(
-        (sender?: IFrontPanel): void => {
+        (sender?: IFPGADataPortClassic): void => {
             if ((sender != null) && (workQueue != null)) {
                 // Get the wire value for the endpoint
                 let sourceWireValue = sender.getWireInValue(fpEndpoint.epAddress);
@@ -112,12 +112,12 @@ const FrontPanelNumberEntry = React.forwardRef<
     );
 
     React.useEffect(() => {
-        onUpdateWireValue(device);
-    }, [device, onUpdateWireValue]);
+        onUpdateWireValue(fpgaDataPort);
+    }, [fpgaDataPort, onUpdateWireValue]);
 
     const onNumberEntryValueChange = React.useCallback(
         async (value: bigint): Promise<void> => {
-            if ((device != null) && (workQueue != null)) {
+            if ((fpgaDataPort != null) && (workQueue != null)) {
                 await workQueue.post(async () => {
                     let targetWireBitMask = targetWireSpanBitMask & 0xffffffffn;
                     let targetWireValue = Number(
@@ -125,7 +125,7 @@ const FrontPanelNumberEntry = React.forwardRef<
                     );
 
                     // Set the wire value for the endpoint
-                    device.setWireInValue(
+                    fpgaDataPort.setWireInValue(
                         fpEndpoint.epAddress,
                         targetWireValue,
                         Number(targetWireBitMask)
@@ -148,7 +148,7 @@ const FrontPanelNumberEntry = React.forwardRef<
                             );
 
                             // Set the wire value for the next endpoint
-                            device.setWireInValue(
+                            fpgaDataPort.setWireInValue(
                                 targetWireAddress,
                                 targetWireValue,
                                 Number(targetWireBitMask)
@@ -159,20 +159,20 @@ const FrontPanelNumberEntry = React.forwardRef<
                         }
                     }
 
-                    await device.updateWireIns();
+                    await fpgaDataPort.updateWireIns();
                 });
             }
 
-            onUpdateWireValue(device);
+            onUpdateWireValue(fpgaDataPort);
         },
-        [device, workQueue, fpEndpoint, targetWireSpanBitMask, onUpdateWireValue]
+        [fpgaDataPort, workQueue, fpEndpoint, targetWireSpanBitMask, onUpdateWireValue]
     );
 
     return (
         <NumberEntry
             {...rootProps}
             ref={forwardedRef}
-            disabled={disabled || (device === null)}
+            disabled={disabled || (fpgaDataPort === null)}
             maximumValue={maximumValue}
             minimumValue={clampedMinimumValue}
             value={value}

package/src/components/FrontPanelPushButton/FrontPanelPushButton.tsx

@@ -45,35 +45,35 @@ const FrontPanelPushButton = React.forwardRef<
     FrontPanelPushButtonElement,
     FrontPanelPushButtonCombinedProps
 >((props, forwardedRef) => {
-    const { device, workQueue } = React.useContext(FrontPanelContext);
+    const { fpgaDataPort, workQueue } = React.useContext(FrontPanelContext);
 
     const { fpEndpoint, disabled, ...buttonProps } = props;
 
     const targetWireBitMask = 1 << fpEndpoint.bitOffset;
 
     const onButtonUp = React.useCallback(async (): Promise<void> => {
-        if ((device != null) && (workQueue != null)) {
+        if ((fpgaDataPort != null) && (workQueue != null)) {
             await workQueue.post(async () => {
-                device.setWireInValue(fpEndpoint.epAddress, 0, targetWireBitMask);
-                await device.updateWireIns();
+                fpgaDataPort.setWireInValue(fpEndpoint.epAddress, 0, targetWireBitMask);
+                await fpgaDataPort.updateWireIns();
             });
         }
-    }, [device, workQueue, fpEndpoint, targetWireBitMask, workQueue]);
+    }, [fpgaDataPort, workQueue, fpEndpoint, targetWireBitMask]);
 
     const onButtonDown = React.useCallback(async (): Promise<void> => {
-        if ((device != null) && (workQueue != null)) {
+        if ((fpgaDataPort != null) && (workQueue != null)) {
             await workQueue.post(async () => {
-                device.setWireInValue(fpEndpoint.epAddress, 0xffffffff, targetWireBitMask);
-                await device.updateWireIns();
+                fpgaDataPort.setWireInValue(fpEndpoint.epAddress, 0xffffffff, targetWireBitMask);
+                await fpgaDataPort.updateWireIns();
             });
         }
-    }, [device, workQueue, fpEndpoint, targetWireBitMask, workQueue]);
+    }, [fpgaDataPort, workQueue, fpEndpoint, targetWireBitMask, workQueue]);
 
     return (
         <Button
             {...buttonProps}
             ref={forwardedRef}
-            disabled={disabled || (device == null)}
+            disabled={disabled || (fpgaDataPort == null)}
             onButtonUp={onButtonUp}
             onButtonDown={onButtonDown}
         />

package/src/components/FrontPanelRangeSlider/FrontPanelRangeSlider.stories.tsx

@@ -57,9 +57,8 @@ export const Primary: Story = {
     render: (props) => {
         const { device, workQueue } = useContext(FrontPanelContext);
 
-        const setWireInPromises: Promise<void>[] = [];
-
-        workQueue.Post(async (): Promise<void> => {
+        // Initialize the WireIns with unique values.
+        workQueue?.post(async (): Promise<void> => {
             let byteId = 0;
 
             for (let address = 0x0; address < 0x20; address++) {
@@ -67,11 +66,10 @@ export const Primary: Story = {
                 for (let byteIndex = 1; byteIndex < 4; byteIndex++) {
                     wireValue |= byteId++ << (8 * byteIndex);
                 }
-                setWireInPromises.push(device.setWireInValue(address, wireValue, 0xffffffff));
+                device?.setWireInValue(address, wireValue, 0xffffffff);
             }
 
-            await Promise.all(setWireInPromises);
-            await device.updateWireIns();
+            await device?.updateWireIns();
         });
 
         return <FrontPanelRangeSlider {...props} />;

package/src/components/FrontPanelRangeSlider/FrontPanelRangeSlider.tsx

@@ -15,7 +15,7 @@ import { FrontPanelContext } from "../../contexts";
 
 import { CalculateBitLength } from "../../core";
 
-import { IFrontPanel } from "@opalkelly/frontpanel-platform-api";
+import { IFPGADataPortClassic } from "@opalkelly/frontpanel-platform-api";
 
 type FrontPanelRangeSliderElement = React.ElementRef<typeof RangeSlider>;
 
@@ -51,7 +51,7 @@ const FrontPanelRangeSlider = React.forwardRef<
 >((props, forwardedRef) => {
     const [value, setValue] = React.useState<bigint>(0n);
 
-    const { device, workQueue } = React.useContext(FrontPanelContext);
+    const { fpgaDataPort, workQueue } = React.useContext(FrontPanelContext);
 
     const { fpEndpoint, maximumValue, disabled, ...rootProps } = props;
 
@@ -63,7 +63,7 @@ const FrontPanelRangeSlider = React.forwardRef<
         ((1n << BigInt(targetBitLength)) - 1n) << BigInt(fpEndpoint.bitOffset);
 
     const onUpdateWireValue = React.useCallback(
-        (sender?: IFrontPanel): void => {
+        (sender?: IFPGADataPortClassic): void => {
             if ((sender != null) && (workQueue != null)) {
                 const sourceWireValue = sender.getWireInValue(fpEndpoint.epAddress);
                 const sourceValue =
@@ -78,29 +78,29 @@ const FrontPanelRangeSlider = React.forwardRef<
 
     const onSelectedValueChangeHandler = React.useCallback(
         (value: number) => {
-            if ((device != null) && (workQueue != null)) {
+            if ((fpgaDataPort != null) && (workQueue != null)) {
                 workQueue.post(async () => {
-                    device.setWireInValue(
+                    fpgaDataPort.setWireInValue(
                         fpEndpoint.epAddress,
                         value << fpEndpoint.bitOffset,
                         Number(targetWireBitMask)
                     );
-                    await device.updateWireIns();
+                    await fpgaDataPort.updateWireIns();
                 });
             }
         },
-        [device, workQueue, fpEndpoint, workQueue, targetWireBitMask]
+        [fpgaDataPort, workQueue, fpEndpoint, targetWireBitMask]
     );
 
     React.useEffect(() => {
-        onUpdateWireValue(device);
-    }, [device, onUpdateWireValue]);
+        onUpdateWireValue(fpgaDataPort);
+    }, [fpgaDataPort, onUpdateWireValue]);
 
     return (
         <RangeSlider
             {...rootProps}
             ref={forwardedRef}
-            disabled={disabled || (device == null)}
+            disabled={disabled || (fpgaDataPort == null)}
             defaultValue={Number(value)}
             maximumValue={maximumValue}
             onValueChange={onSelectedValueChangeHandler}

package/src/components/FrontPanelSelectEntry/FrontPanelSelectEntry.stories.tsx

@@ -43,10 +43,8 @@ export const Primary: Story = {
     render: ({ ...args }) => {
         const { device, workQueue } = useContext(FrontPanelContext);
 
-        const setWireInPromises: Promise<void>[] = [];
-
         // Initialize the WireIns with unique values.
-        workQueue.Post(async (): Promise<void> => {
+        workQueue?.post(async (): Promise<void> => {
             let byteId = 0;
 
             for (let address = 0x0; address < 0x20; address++) {
@@ -54,11 +52,10 @@ export const Primary: Story = {
                 for (let byteIndex = 1; byteIndex < 4; byteIndex++) {
                     wireValue |= byteId++ << (8 * byteIndex);
                 }
-                setWireInPromises.push(device.setWireInValue(address, wireValue, 0xffffffff));
+                device?.setWireInValue(address, wireValue, 0xffffffff);
             }
 
-            await Promise.all(setWireInPromises);
-            await device.updateWireIns();
+            await device?.updateWireIns();
         });
 
         const { maximumValue, ...props } = args;

package/src/components/FrontPanelSelectEntry/FrontPanelSelectEntryRoot.tsx

@@ -15,7 +15,7 @@ import { FrontPanelContext } from "../../contexts";
 
 import { CalculateBitLength } from "../../core";
 
-import { IFrontPanel, WIREIN_ADDRESS_RANGE } from "@opalkelly/frontpanel-platform-api";
+import { IFPGADataPortClassic, WIREIN_ADDRESS_RANGE } from "@opalkelly/frontpanel-platform-api";
 
 interface FrontPanelSelectEntryRootCombinedProps
     extends React.ComponentPropsWithoutRef<typeof SelectEntry.Root>,
@@ -55,7 +55,7 @@ export type { FrontPanelSelectEntryRootCombinedProps };
 const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps> = (props) => {
     const [value, setValue] = React.useState<bigint>(0n);
 
-    const { device, workQueue } = React.useContext(FrontPanelContext);
+    const { fpgaDataPort, workQueue } = React.useContext(FrontPanelContext);
 
     const { fpEndpoint, maximumValue, disabled, ...rootProps } = props;
 
@@ -67,7 +67,7 @@ const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps
         ((1n << BigInt(targetBitLength)) - 1n) << BigInt(fpEndpoint.bitOffset);
 
     const onUpdateWireValue = React.useCallback(
-        (sender?: IFrontPanel): void => {
+        (sender?: IFPGADataPortClassic): void => {
             if ((sender != null) && (workQueue != null)) {
                 // Get the wire value for the endpoint
                 let sourceWireValue = sender.getWireInValue(fpEndpoint.epAddress);
@@ -108,7 +108,7 @@ const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps
 
     const onSelectedValueChangeHandler = React.useCallback(
         (value: string) => {
-            if ((device != null) && (workQueue != null)) {
+            if ((fpgaDataPort != null) && (workQueue != null)) {
                 const targetWireSpanValue = BigInt(value);
                 workQueue.post(async () => {
                     let targetWireBitMask = targetWireSpanBitMask & 0xffffffffn;
@@ -117,7 +117,7 @@ const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps
                     );
 
                     // Set the wire value for the endpoint
-                    device.setWireInValue(
+                    fpgaDataPort.setWireInValue(
                         fpEndpoint.epAddress,
                         targetWireValue,
                         Number(targetWireBitMask)
@@ -142,7 +142,7 @@ const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps
                             );
 
                             // Set the wire value for the next endpoint
-                            device.setWireInValue(
+                            fpgaDataPort.setWireInValue(
                                 fpEndpoint.epAddress + wireIndex,
                                 targetWireValue,
                                 Number(targetWireBitMask)
@@ -153,23 +153,23 @@ const FrontPanelSelectEntryRoot: React.FC<FrontPanelSelectEntryRootCombinedProps
                         }
                     }
 
-                    await device.updateWireIns();
+                    await fpgaDataPort.updateWireIns();
                 });
             }
 
-            onUpdateWireValue(device);
+            onUpdateWireValue(fpgaDataPort);
         },
-        [device, workQueue, fpEndpoint, onUpdateWireValue]
+        [fpgaDataPort, workQueue, fpEndpoint, onUpdateWireValue]
     );
 
     React.useEffect(() => {
-        onUpdateWireValue(device);
-    }, [device, onUpdateWireValue]);
+        onUpdateWireValue(fpgaDataPort);
+    }, [fpgaDataPort, onUpdateWireValue]);
 
     return (
         <SelectEntry.Root
             {...rootProps}
-            disabled={disabled || (device == null)}
+            disabled={disabled || (fpgaDataPort == null)}
             value={value.toString()}
             onValueChange={onSelectedValueChangeHandler}
         />

package/src/components/FrontPanelToggleSwitch/FrontPanelToggleSwitch.tsx

@@ -7,7 +7,7 @@
 
 import React from "react";
 
-import { IFrontPanel, WireValue } from "@opalkelly/frontpanel-platform-api";
+import { IFPGADataPortClassic, WireValue } from "@opalkelly/frontpanel-platform-api";
 
 import { ToggleState } from "../../core";
 
@@ -51,14 +51,14 @@ const FrontPanelToggleSwitch = React.forwardRef<
 >((props, forwardedRef) => {
     const [state, setState] = React.useState<ToggleState>(ToggleState.Off);
 
-    const { device, workQueue } = React.useContext(FrontPanelContext);
+    const { fpgaDataPort, workQueue } = React.useContext(FrontPanelContext);
 
     const { fpEndpoint, disabled, ...buttonProps } = props;
 
     const targetWireBitMask = 1 << fpEndpoint.bitOffset;
 
     const onUpdateWireValue = React.useCallback(
-        (sender?: IFrontPanel): void => {
+        (sender?: IFPGADataPortClassic): void => {
             if ((sender != null) && (workQueue != null)) {
                 // Set the toggle state based on the value of the target bit of the Wire endpoint
                 const sourceWireValue = sender.getWireInValue(fpEndpoint.epAddress);
@@ -74,31 +74,31 @@ const FrontPanelToggleSwitch = React.forwardRef<
 
     const onToggleStateChanged = React.useCallback(
         async (state: ToggleState): Promise<void> => {
-            if ((device != null) && (workQueue != null)) {
+            if ((fpgaDataPort != null) && (workQueue != null)) {
                 await workQueue.post(async () => {
                     // Set the value of the target bit of the Wire endpoint based on the toggle state
                     const targetWireValue: WireValue = state === ToggleState.On ? 0xffffffff : 0;
 
-                    device.setWireInValue(fpEndpoint.epAddress, targetWireValue, targetWireBitMask);
+                    fpgaDataPort.setWireInValue(fpEndpoint.epAddress, targetWireValue, targetWireBitMask);
 
-                    await device.updateWireIns();
+                    await fpgaDataPort.updateWireIns();
                 });
             }
 
-            onUpdateWireValue(device);
+            onUpdateWireValue(fpgaDataPort);
         },
-        [device, workQueue, fpEndpoint, targetWireBitMask]
+        [fpgaDataPort, workQueue, fpEndpoint, targetWireBitMask]
     );
 
     React.useEffect(() => {
-        onUpdateWireValue(device);
-    }, [device, onUpdateWireValue]);
+        onUpdateWireValue(fpgaDataPort);
+    }, [fpgaDataPort, onUpdateWireValue]);
 
     return (
         <ToggleSwitch
             ref={forwardedRef}
             {...buttonProps}
-            disabled={disabled || (device == null)}
+            disabled={disabled || (fpgaDataPort == null)}
             state={state}
             onToggleStateChanged={onToggleStateChanged}
         />

package/src/components/FrontPanelTriggerButton/FrontPanelTriggerButton.tsx

@@ -47,23 +47,23 @@ const FrontPanelTriggerButton = React.forwardRef<
     FrontPanelTriggerButtonElement,
     FrontPanelTriggerButtonCombinedProps
 >((props, forwardedRef) => {
-    const { device, workQueue } = React.useContext(FrontPanelContext);
+    const { fpgaDataPort, workQueue } = React.useContext(FrontPanelContext);
 
     const { fpEndpoint, disabled, ...buttonProps } = props;
 
     const onButtonDown = React.useCallback(async (): Promise<void> => {
-        if ((device != null) && (workQueue != null)) {
+        if ((fpgaDataPort != null) && (workQueue != null)) {
             await workQueue.post(async () => {
-                await device.activateTriggerIn(fpEndpoint.epAddress, fpEndpoint.bitOffset);
+                await fpgaDataPort.activateTriggerIn(fpEndpoint.epAddress, fpEndpoint.bitOffset);
             });
         }
-    }, [device, workQueue, fpEndpoint]);
+    }, [fpgaDataPort, workQueue, fpEndpoint]);
 
     return (
         <Button
             {...buttonProps}
             ref={forwardedRef}
-            disabled={disabled || (device == null)}
+            disabled={disabled || (fpgaDataPort == null)}
             onButtonDown={onButtonDown}
         />
     );

package/src/contexts/FrontPanelContext.ts

@@ -8,15 +8,15 @@
 import React from "react";
 
 import {
-    IFrontPanel,
-    IFrontPanelEventSource,
+    IFPGADataPortClassic,
+    IFPGADataPortClassicEventSource,
     WorkQueue
 } from "@opalkelly/frontpanel-platform-api";
 
 export type FrontPanelContextValue = {
-    device?: IFrontPanel;
+    fpgaDataPort?: IFPGADataPortClassic;
     workQueue?: WorkQueue;
-    eventSource?: IFrontPanelEventSource;
+    eventSource?: IFPGADataPortClassicEventSource;
 };
 
 const FrontPanelContext = React.createContext<FrontPanelContextValue>({});