@stonecrop/beam 0.4.4 → 0.4.5

package/dist/composables/mqtt.js

@@ -6,7 +6,13 @@ import { onMounted, onUnmounted, ref } from 'vue';
  * @returns MQTT stream messages
  * @beta
  */
-export const useMqttStream = (options) => {
+export const useMqttStream = async (options) => {
+    if (options.host && options.port) {
+        const portActive = await isPortActive(options.host, options.port);
+        if (!portActive) {
+            return;
+        }
+    }
     const client = ref();
     const messages = ref({});
     onMounted(() => {
@@ -33,3 +39,47 @@ export const useMqttStream = (options) => {
     });
     return { messages };
 };
+/**
+ * Check if a local port has a service running
+ * @param host the host to check
+ * @param port the port to check
+ * @returns true if the port has a service running, false otherwise
+ *
+ * @beta
+ */
+export const isPortActive = async (host, port) => {
+    try {
+        const controller = new AbortController();
+        // Set a timeout of 2 seconds
+        const timeoutId = setTimeout(() => controller.abort(), 2000);
+        try {
+            await fetch(`${host}:${port}`, {
+                mode: 'no-cors', // This allows checking without CORS issues
+                signal: controller.signal,
+            });
+            clearTimeout(timeoutId);
+            // If we get any response, the port is in use
+            return true;
+        }
+        catch (error) {
+            clearTimeout(timeoutId);
+            if (error instanceof DOMException && error.name === 'AbortError') {
+                // Timeout - port is probably not in use
+                return false;
+            }
+            // For connection refused errors, we need to check the error message
+            // as different browsers handle this differently
+            const errorString = String(error);
+            if (errorString.includes('NetworkError') ||
+                errorString.includes('Failed to fetch') ||
+                errorString.includes('net::ERR_CONNECTION_REFUSED')) {
+                return false;
+            }
+            // If we get here, there might be something running on the port
+            return true;
+        }
+    }
+    catch (error) {
+        return false;
+    }
+};

package/dist/src/composables/mqtt.d.ts

@@ -5,7 +5,16 @@ import { IMqttStream } from '../types';
  * @returns MQTT stream messages
  * @beta
  */
-export declare const useMqttStream: (options: IMqttStream) => {
+export declare const useMqttStream: (options: IMqttStream) => Promise<{
     messages: import("vue").Ref<Record<string, string[]>, Record<string, string[]>>;
-};
+} | undefined>;
+/**
+ * Check if a local port has a service running
+ * @param host the host to check
+ * @param port the port to check
+ * @returns true if the port has a service running, false otherwise
+ *
+ * @beta
+ */
+export declare const isPortActive: (host: string, port: number) => Promise<boolean>;
 //# sourceMappingURL=mqtt.d.ts.map

package/dist/src/composables/mqtt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mqtt.d.ts","sourceRoot":"","sources":["../../../src/composables/mqtt.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAEtC;;;;;GAKG;AACH,eAAO,MAAM,aAAa,YAAa,WAAW;;CAiCjD,CAAA"}
+{"version":3,"file":"mqtt.d.ts","sourceRoot":"","sources":["../../../src/composables/mqtt.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAEtC;;;;;GAKG;AACH,eAAO,MAAM,aAAa,YAAmB,WAAW;;cAwCvD,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,SAAgB,MAAM,QAAQ,MAAM,qBAuC5D,CAAA"}

package/dist/src/index.d.ts

@@ -23,7 +23,7 @@ import SegmentedDisplay from './components/SegmentedDisplay.vue';
 import SplitColumn from './components/SplitColumn.vue';
 import ToggleArrow from './components/ToggleArrow.vue';
 import { useMqttStream } from './composables/mqtt';
-export type { IMqttStream, ListViewItem } from './types';
+export type * from './types';
 import '../themes/beam.css';
 /**
  * Install all Beam components

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,cAAc,MAAM,iCAAiC,CAAA;AAC5D,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,eAAe,MAAM,kCAAkC,CAAA;AAC9D,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AACxD,OAAO,oBAAoB,CAAA;AAE3B;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAwBxB;AAED,OAAO,EACN,YAAY,EACZ,SAAS,EACT,OAAO,EACP,cAAc,EACd,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,OAAO,EACP,aAAa,GACb,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,cAAc,MAAM,iCAAiC,CAAA;AAC5D,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,eAAe,MAAM,kCAAkC,CAAA;AAC9D,OAAO,YAAY,MAAM,+BAA+B,CAAA;AACxD,OAAO,OAAO,MAAM,0BAA0B,CAAA;AAC9C,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,UAAU,MAAM,6BAA6B,CAAA;AACpD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,QAAQ,MAAM,2BAA2B,CAAA;AAChD,OAAO,MAAM,MAAM,yBAAyB,CAAA;AAC5C,OAAO,SAAS,MAAM,4BAA4B,CAAA;AAClD,OAAO,gBAAgB,MAAM,mCAAmC,CAAA;AAChE,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,WAAW,MAAM,8BAA8B,CAAA;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,mBAAmB,SAAS,CAAA;AAC5B,OAAO,oBAAoB,CAAA;AAE3B;;;;GAIG;AACH,iBAAS,OAAO,CAAC,GAAG,EAAE,GAAG,QAwBxB;AAED,OAAO,EACN,YAAY,EACZ,SAAS,EACT,OAAO,EACP,cAAc,EACd,UAAU,EACV,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,SAAS,EACT,eAAe,EACf,YAAY,EACZ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,SAAS,EACT,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,OAAO,EACP,aAAa,GACb,CAAA"}

package/dist/src/types/index.d.ts

@@ -1,28 +1,59 @@
 import type { IClientOptions } from 'mqtt';
 /**
- * @beta
+ * @public
  */
 export type ListViewItem = {
-    description: string;
-    label: string;
+    barcode?: string;
     checked?: boolean;
     count?: {
         count: number;
         of: number;
-        uom: string;
+        uom?: string;
     };
     date?: string;
     dateFormat?: string;
     debounce?: number;
+    description?: string;
+    label?: string;
     linkComponent?: string;
     route?: string;
 };
-type RGB = `rgb(${number}, ${number}, ${number})`;
-type HSL = `hsl(${number}, ${number}%, ${number}%)`;
-type HSLA = `hsl(${number}, ${number}%, ${number}%), ${number}`;
-type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
-type HEX = `#${string}`;
-export type Color = RGB | RGBA | HEX | HSL | HSLA | string;
+/**
+ * @public
+ */
+export type BeamColor = RGB | RGBA | HEX | HSL | HSLA | string;
+/**
+ * @public
+ */
+export type BeamFilterChoice = {
+    label: string;
+    value: string;
+};
+/**
+ * RGB color string representation
+ * @public
+ */
+export type RGB = `rgb(${number}, ${number}, ${number})`;
+/**
+ * RGBA color string representation
+ * @public
+ */
+export type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+/**
+ * HSL color string representation
+ * @public
+ */
+export type HSL = `hsl(${number}, ${number}%, ${number}%)`;
+/**
+ * HSLA color string representation
+ * @public
+ */
+export type HSLA = `hsl(${number}, ${number}%, ${number}%), ${number}`;
+/**
+ * HEX color string representation
+ * @public
+ */
+export type HEX = `#${string}`;
 /**
  * MQTT stream options
  * @public
@@ -30,5 +61,4 @@ export type Color = RGB | RGBA | HEX | HSL | HSLA | string;
 export interface IMqttStream extends IClientOptions {
     topics?: string[];
 }
-export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/src/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAA;AAE1C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,MAAM,CAAA;IAEb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,EAAE,EAAE,MAAM,CAAA;QACV,GAAG,EAAE,MAAM,CAAA;KACX,CAAA;IACD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,KAAK,GAAG,GAAG,OAAO,MAAM,KAAK,MAAM,KAAK,MAAM,GAAG,CAAA;AACjD,KAAK,GAAG,GAAG,OAAO,MAAM,KAAK,MAAM,MAAM,MAAM,IAAI,CAAA;AACnD,KAAK,IAAI,GAAG,OAAO,MAAM,KAAK,MAAM,MAAM,MAAM,OAAO,MAAM,EAAE,CAAA;AAC/D,KAAK,IAAI,GAAG,QAAQ,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,GAAG,CAAA;AAC9D,KAAK,GAAG,GAAG,IAAI,MAAM,EAAE,CAAA;AAEvB,MAAM,MAAM,KAAK,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAA;AAC1D;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CACjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,MAAM,CAAA;AAE1C;;GAEG;AACH,MAAM,MAAM,YAAY,GAAG;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,KAAK,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,EAAE,EAAE,MAAM,CAAA;QACV,GAAG,CAAC,EAAE,MAAM,CAAA;KACZ,CAAA;IACD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAID;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAA;AAE9D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,GAAG,GAAG,OAAO,MAAM,KAAK,MAAM,KAAK,MAAM,GAAG,CAAA;AAExD;;;GAGG;AACH,MAAM,MAAM,IAAI,GAAG,QAAQ,MAAM,KAAK,MAAM,KAAK,MAAM,KAAK,MAAM,GAAG,CAAA;AAErE;;;GAGG;AACH,MAAM,MAAM,GAAG,GAAG,OAAO,MAAM,KAAK,MAAM,MAAM,MAAM,IAAI,CAAA;AAE1D;;;GAGG;AACH,MAAM,MAAM,IAAI,GAAG,OAAO,MAAM,KAAK,MAAM,MAAM,MAAM,OAAO,MAAM,EAAE,CAAA;AAEtE;;;GAGG;AACH,MAAM,MAAM,GAAG,GAAG,IAAI,MAAM,EAAE,CAAA;AAE9B;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,cAAc;IAClD,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CACjB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stonecrop/beam",
-  "version": "0.4.4",
+  "version": "0.4.5",
   "license": "MIT",
   "type": "module",
   "author": {

package/src/components/BeamDayDivider.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed } from 'vue'
+import { computed } from 'vue'
 
 import type { ListViewItem } from '../types'
 

package/src/components/BeamFilter.vue

@@ -2,12 +2,11 @@
 	<div ref="beam-filters" class="beam_filters" :style="{ height: isOpen ? '100%' : headerHeight }">
 		<div ref="beam-filters-header" @click="toggle" class="beam_filters-heading">
 			<ToggleArrow :open="isOpen" />
-			<BeamHeading> Filter </BeamHeading>
+			<BeamHeading>Filter</BeamHeading>
 		</div>
+
 		<div class="beam_filters-options">
-			<slot>
-				<p>OPTIONS GO HERE</p>
-			</slot>
+			<slot></slot>
 		</div>
 	</div>
 </template>
@@ -15,6 +14,8 @@
 <script setup lang="ts">
 import { ref, onMounted, useTemplateRef } from 'vue'
 
+defineSlots<{ default(): any }>()
+
 const header = useTemplateRef('beam-filters-header')
 const beamFilters = useTemplateRef('beam-filters')
 
@@ -27,9 +28,11 @@ const toggle = () => {
 }
 
 onMounted(() => {
-	headerHeight.value = getTotalHeight(header.value)
-	totalHeight.value = getTotalHeight(beamFilters.value)
-	beamFilters.value.style.height = headerHeight.value
+	if (header.value && beamFilters.value) {
+		headerHeight.value = getTotalHeight(header.value)
+		totalHeight.value = getTotalHeight(beamFilters.value)
+		beamFilters.value.style.height = headerHeight.value
+	}
 })
 
 const getTotalHeight = (el: HTMLDivElement) => {

package/src/components/BeamFilterOption.vue

@@ -1,25 +1,26 @@
 <template>
 	<BeamHeading class="beam_filter-option-heading">{{ title }}</BeamHeading>
-	<div @click="toggle" class="beam_filter-option">
-		<div ref="select" class="beam_filter-option-select">
+	<div @click="open = !open" class="beam_filter-option">
+		<div class="beam_filter-option-select">
 			<div class="beam_filter-arrow">
 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.36 70.71">
 					<polygon points="0 70.71 0 0 35.36 35.36 0 70.71" />
 				</svg>
 			</div>
 			<div class="beam_filter-label">
-				<label>{{ choice }}</label>
+				<label>{{ label }}</label>
 			</div>
 		</div>
+
 		<ul ref="menu" v-if="open" class="beam_filter-select-menu">
 			<li
-				v-for="(opt, index) in choices"
-				:class="{ selected: choice == opt.choice }"
-				:data-value="opt.value"
-				:key="index"
+				v-for="choice in choices"
+				:class="{ selected: label == choice.label }"
+				:data-value="choice.value"
+				:key="choice.value"
 				class="beam_filter-select-option"
-				@click="updateValue(opt)">
-				{{ opt.choice }}
+				@click="selectChoice(choice)">
+				{{ choice.label }}
 			</li>
 		</ul>
 	</div>
@@ -28,27 +29,25 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-type Choice = {
-	choice: string
-	value: string
-}
+import { BeamFilterChoice } from '../types'
+
+const emit = defineEmits<{
+	select: [choice: BeamFilterChoice]
+}>()
 
 const { title = 'title', choices = [] } = defineProps<{
-	choices: Choice[]
+	choices: BeamFilterChoice[]
 	title?: string
 }>()
 
 const open = ref(false)
+const label = ref(choices[0].label)
 const value = ref(choices[0].value)
-const choice = ref(choices[0].choice)
 
-const updateValue = (data: Choice) => {
-	choice.value = data.choice
+const selectChoice = (data: BeamFilterChoice) => {
+	label.value = data.label
 	value.value = data.value
-}
-
-const toggle = () => {
-	open.value = !open.value
+	emit('select', data)
 }
 </script>
 

package/src/components/ListView.vue

@@ -1,6 +1,6 @@
 <template>
 	<ul class="beam_list-view">
-		<li v-for="item in items" :key="item.label">
+		<li v-for="item in items" :key="item.barcode || item.label">
 			<template v-if="item.linkComponent == 'BeamDayDivider'">
 				<BeamDayDivider :item="item"></BeamDayDivider>
 			</template>

package/src/components/SegmentedDisplay.vue

@@ -3,8 +3,11 @@
 		<h1 class="segmented-display-output" :style="{ color: getColor(textColor) }">{{ getOutput }}</h1>
 	</div>
 </template>
+
 <script setup lang="ts">
-import { ref, defineProps, computed } from 'vue'
+import { computed } from 'vue'
+
+import { BeamColor } from '../types'
 
 const {
 	displayInput = 120.2568,
@@ -14,16 +17,16 @@ const {
 } = defineProps<{
 	displayInput?: number
 	decimalPlaces?: number
-	displayColor?: Color
-	textColor?: Color
+	displayColor?: BeamColor
+	textColor?: BeamColor
 }>()
 
 const getOutput = computed(() => {
-	if (displayInput.length == 0) return Number(0).toFixed(decimalPlaces)
+	if (displayInput === 0) return Number(0).toFixed(decimalPlaces)
 	return displayInput.toFixed(decimalPlaces)
 })
 
-const getColor = color => {
+const getColor = (color: BeamColor) => {
 	return color.substr(0, 2) == '--' ? `var(${color})` : color
 }
 </script>

package/src/composables/mqtt.ts

@@ -9,7 +9,14 @@ import { IMqttStream } from '../types'
  * @returns MQTT stream messages
  * @beta
  */
-export const useMqttStream = (options: IMqttStream) => {
+export const useMqttStream = async (options: IMqttStream) => {
+	if (options.host && options.port) {
+		const portActive = await isPortActive(options.host, options.port)
+		if (!portActive) {
+			return
+		}
+	}
+
 	const client = ref<MqttClient>()
 	const messages = ref<Record<string, string[]>>({})
 
@@ -43,3 +50,52 @@ export const useMqttStream = (options: IMqttStream) => {
 
 	return { messages }
 }
+
+/**
+ * Check if a local port has a service running
+ * @param host the host to check
+ * @param port the port to check
+ * @returns true if the port has a service running, false otherwise
+ *
+ * @beta
+ */
+export const isPortActive = async (host: string, port: number) => {
+	try {
+		const controller = new AbortController()
+		// Set a timeout of 2 seconds
+		const timeoutId = setTimeout(() => controller.abort(), 2000)
+
+		try {
+			await fetch(`${host}:${port}`, {
+				mode: 'no-cors', // This allows checking without CORS issues
+				signal: controller.signal,
+			})
+
+			clearTimeout(timeoutId)
+			// If we get any response, the port is in use
+			return true
+		} catch (error) {
+			clearTimeout(timeoutId)
+			if (error instanceof DOMException && error.name === 'AbortError') {
+				// Timeout - port is probably not in use
+				return false
+			}
+
+			// For connection refused errors, we need to check the error message
+			// as different browsers handle this differently
+			const errorString = String(error)
+			if (
+				errorString.includes('NetworkError') ||
+				errorString.includes('Failed to fetch') ||
+				errorString.includes('net::ERR_CONNECTION_REFUSED')
+			) {
+				return false
+			}
+
+			// If we get here, there might be something running on the port
+			return true
+		}
+	} catch (error) {
+		return false
+	}
+}

package/src/index.ts

@@ -24,7 +24,7 @@ import SegmentedDisplay from './components/SegmentedDisplay.vue'
 import SplitColumn from './components/SplitColumn.vue'
 import ToggleArrow from './components/ToggleArrow.vue'
 import { useMqttStream } from './composables/mqtt'
-export type { IMqttStream, ListViewItem } from './types'
+export type * from './types'
 import '../themes/beam.css'
 
 /**

package/src/types/index.ts

@@ -1,32 +1,70 @@
 import type { IClientOptions } from 'mqtt'
 
 /**
- * @beta
+ * @public
  */
 export type ListViewItem = {
-	description: string
-	label: string
-
+	barcode?: string
 	checked?: boolean
 	count?: {
 		count: number
 		of: number
-		uom: string
+		uom?: string
 	}
 	date?: string
 	dateFormat?: string
 	debounce?: number
+	description?: string
+	label?: string
 	linkComponent?: string
 	route?: string
 }
 
-type RGB = `rgb(${number}, ${number}, ${number})`
-type HSL = `hsl(${number}, ${number}%, ${number}%)`
-type HSLA = `hsl(${number}, ${number}%, ${number}%), ${number}`
-type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`
-type HEX = `#${string}`
+// TODO: the `string` at the end should be replaced by `DataType.Color`
+// in the `csstype` lib but import seems to be missing
+/**
+ * @public
+ */
+export type BeamColor = RGB | RGBA | HEX | HSL | HSLA | string
+
+/**
+ * @public
+ */
+export type BeamFilterChoice = {
+	label: string
+	value: string
+}
+
+/**
+ * RGB color string representation
+ * @public
+ */
+export type RGB = `rgb(${number}, ${number}, ${number})`
+
+/**
+ * RGBA color string representation
+ * @public
+ */
+export type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`
+
+/**
+ * HSL color string representation
+ * @public
+ */
+export type HSL = `hsl(${number}, ${number}%, ${number}%)`
+
+/**
+ * HSLA color string representation
+ * @public
+ */
+export type HSLA = `hsl(${number}, ${number}%, ${number}%), ${number}`
+
+/**
+ * HEX color string representation
+ * @public
+ */
+export type HEX = `#${string}`
 
-export type Color = RGB | RGBA | HEX | HSL | HSLA | string
 /**
  * MQTT stream options
  * @public