@adcops/autocore-react 3.0.40 → 3.1.5

package/src/hooks/useAutoCoreTag.ts

@@ -0,0 +1,103 @@
+/*
+ * Copyright (C) 2025 Automated Design Corp.. All Rights Reserved.
+ * Created Date: 2025-09-05 08:03:32
+ * -----
+ * Last Modified: 2025-09-10 10:22:31
+ * -----
+ *
+ */
+
+/**
+ * @module hooks/useAutoCoreTag.ts
+ *
+ * Factory for generating strongly-typed React hooks to consume AutoCoreTagContext.
+ */
+
+import { useCallback, useContext, useMemo } from "react";
+import type { BaseContextValue, TagConfig, TagValueMap } from "../core/AutoCoreTagTypes";
+
+export function makeAutoCoreTagHooks<Spec extends readonly TagConfig[]>(
+  Context: React.Context<BaseContextValue<TagValueMap<Spec>>>,
+  tags: Spec
+) {
+  type VMap = TagValueMap<Spec>;
+  type TagNames = keyof VMap & string;
+
+  const findCfg = (tagName: string) =>
+    tags.find(t => t.tagName === tagName) as (Spec[number] | undefined);
+
+  /**
+   * Access a single tag by name.
+   * Returns current value, raw value, direct server writer, and tap helper.
+   */
+  const useAutoCoreTag = <K extends TagNames>(tagName: K) => {
+    const { values, rawValues, isLoading, write: ctxWrite, tap: ctxTap } = useContext(Context);
+
+    const cfg = findCfg(tagName as string);
+    if (!cfg) throw new Error(`useAutoCoreTag: unknown tagName '${String(tagName)}'`);
+
+    const write = useCallback(
+      (displayValue: VMap[K]) => ctxWrite(tagName, displayValue),
+      [ctxWrite, tagName]
+    );
+
+    const tap = useCallback(() => ctxTap?.(tagName), [ctxTap, tagName]);
+
+    return {
+      value: values[tagName] as VMap[K],
+      rawValue: rawValues[tagName as string],
+      write,
+      tap,
+      isLoading,
+    } as const;
+  };
+
+  /**
+   * Access multiple tags at once with a bulk writer.
+   */
+  const useAutoCoreTags = <K extends TagNames>(tagNames: readonly K[]) => {
+    const { values, rawValues, isLoading, write: ctxWrite } = useContext(Context);
+
+    const subset = useMemo(
+      () =>
+        Object.fromEntries(
+          tagNames.map(k => [k, values[k] as VMap[K]])
+        ) as { [P in K]: VMap[P] },
+      [values, tagNames]
+    );
+
+    const rawSubset = useMemo(
+      () =>
+        Object.fromEntries(
+          tagNames.map(k => [k, rawValues[k as string]])
+        ) as { [P in K]: unknown },
+      [rawValues, tagNames]
+    );
+
+    const write = useCallback(async (tagName: K, value: VMap[K]) => {
+      await ctxWrite(tagName, value);
+    }, [ctxWrite]);
+
+    return { values: subset, rawValues: rawSubset, write, isLoading } as const;
+  };
+
+  /**
+   * Compute a derived value from the full tag state.
+   */
+  const useAutoCoreSelect = <R>(selector: (all: Readonly<Partial<VMap>>) => R, deps: any[] = []) => {
+    const { values, isLoading } = useContext(Context);
+    const selected = useMemo(() => selector(values), [values, ...deps]);
+    return { selected, isLoading } as const;
+  };
+
+  /**
+   * Access scale configurations and update functions.
+   */
+  const useScales = () => {
+    const { scales, updateScale } = useContext(Context);
+    const getScale = useCallback((scaleName: string) => scales[scaleName], [scales]);
+    return { scales, updateScale, getScale } as const;
+  };
+
+  return { useAutoCoreTag, useAutoCoreTags, useAutoCoreSelect, useScales } as const;
+}

package/src/hub/HubBase.ts

@@ -3,14 +3,14 @@
  * Created Date: 2023-12-15 14:21:33
  * Author: Thomas C. Bitsky Jr.
  * -----
- * Last Modified: 2025-03-31 08:35:09
+ * Last Modified: 2025-09-05 14:50:03
  * Modified By: ADC
  * -----
  * 
  */
 
-import { EventEmitterContextType} from '../core/EventEmitterContext';
-import {CommandMessageResult} from "./CommandMessage";
+import type { EventEmitterContextType} from '../core/EventEmitterContext';
+import type {CommandMessageResult} from "./CommandMessage";
 
 
 /**

package/src/hub/HubSimulate.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2023 Automated Design Corp. All Rights Reserved.
  * Created Date: 2023-12-17 10:38:21
  * -----
- * Last Modified: 2024-04-24 11:56:26
+ * Last Modified: 2025-09-05 14:49:57
  * Modified By: ADC
  * -----
  * 
@@ -10,7 +10,7 @@
 
 
 import { HubBase } from './HubBase';
-import { CommandMessageResult } from "./CommandMessage";
+import type { CommandMessageResult } from "./CommandMessage";
 /**
  * Hub for simulating functionality when no backend is present.
  */

package/src/hub/HubTauri.ts

@@ -3,16 +3,16 @@
  * Created Date: 2023-12-17 09:50:23
  * Author: Thomas C. Bitsky Jr.
  * -----
- * Last Modified: 2024-04-24 11:56:32
+ * Last Modified: 2025-09-05 14:53:18
  * Modified By: ADC
  * -----
  * 
  */
 
-import { InvokeArgs } from '@tauri-apps/api/tauri';
+import type { InvokeArgs } from '@tauri-apps/api/tauri';
 import { HubBase } from './HubBase';
 import {event, invoke} from '@tauri-apps/api';
-import {CommandMessageResult} from "./CommandMessage";
+import type {CommandMessageResult} from "./CommandMessage";
 
 /**
  * Hub for integrating with the Tauri backend.

package/src/hub/HubWebSocket.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp.. All Rights Reserved.
  * Created Date: 2024-04-17 09:13:07
  * -----
- * Last Modified: 2025-03-31 08:35:12
+ * Last Modified: 2025-09-05 15:18:44
  * -----
  * 
  */
@@ -22,7 +22,7 @@
  */
 
 import { HubBase } from './HubBase';
-import {CommandMessage, CommandMessageResult} from "./CommandMessage";
+import type { CommandMessage, CommandMessageResult } from "./CommandMessage";
 
 // Function to parse the JSON string received from the server into a CommandMessage object
 // function parseCommandMessage(jsonString: string): CommandMessage {
@@ -57,31 +57,28 @@ interface RequestRecord {
  * @returns {Blob} A Blob object representing the decoded binary data.
  */
 function b64toBlob(
-    b64Data: string, 
-    contentType: string = 'application/octet-stream', 
+    b64Data: string,
+    contentType: string = "application/octet-stream",
     sliceSize: number = 512
 ): Blob {
-
     const byteCharacters = atob(b64Data);
-    const byteArrays: Uint8Array[] = [];
+    const buffers: ArrayBuffer[] = [];
 
     for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
         const slice = byteCharacters.slice(offset, offset + sliceSize);
 
-        const byteNumbers: number[] = new Array(slice.length);
-        for (let i = 0; i < slice.length; i++) {
-            byteNumbers[i] = slice.charCodeAt(i);
-        }
+        const byteNumbers = new Array<number>(slice.length);
+        for (let i = 0; i < slice.length; i++) byteNumbers[i] = slice.charCodeAt(i);
 
-        const byteArray = new Uint8Array(byteNumbers);
-        byteArrays.push(byteArray);
+        const uint8 = new Uint8Array(byteNumbers);
+        buffers.push(uint8.buffer as ArrayBuffer); // <-- pass ArrayBuffer to Blob
     }
 
-    const blob = new Blob(byteArrays, { type: contentType });
-    return blob;
+    return new Blob(buffers, { type: contentType });
 }
 
 
+
 /**
  * Creates a temporary hyperlink in the document and programmatically triggers a download of the Blob provided.
  *
@@ -129,9 +126,9 @@ export class HubWebSocket extends HubBase {
      */
     constructor() {
         super();
-        
+
         const host = window.location.hostname; // Get the hostname from the address bar
-        
+
         // Default to using autocore-server.
         let port = undefined; // window.location.port; // Get the port from the address bar, if any
 
@@ -146,13 +143,13 @@ export class HubWebSocket extends HubBase {
         //
         // Websocket connection established.
         //
-        this.socket.onopen = function() {
+        this.socket.onopen = function () {
             console.log("WebSocket connection established.");
             self.publish("HUB/connected", true);
             self.setIsConnected(true);
         };
-        
-                
+
+
         // Message recevied via the websocket connection.
         //
         this.socket.onmessage = (event) => {
@@ -164,22 +161,22 @@ export class HubWebSocket extends HubBase {
 
                 const { resolve, reject } = this.pendingRequests.get(data.request_id)!;
 
-                if (data.fname === "FILE_DOWNLOAD" 
+                if (data.fname === "FILE_DOWNLOAD"
                     && data.args["file_name"] !== undefined && data.args["file_name"] !== null
                     && data.args["file_name"].length > 0
                 ) {
 
                     // The file name was supplied in the original request
                     let tokens = data.args["file_name"].split("/");
-                    
-                    const filename = tokens[tokens.length - 1]; 
+
+                    const filename = tokens[tokens.length - 1];
                     if (data.result && data.result.success) {
                         const blob = b64toBlob(data.result.data);
                         downloadBlob(blob, filename);
-                        
+
                         // Don't send the whole file through; that's crazy.
                         data.result.data = filename;
-                        
+
                         // Signal the function that initiated the download that all is well.
                         resolve(data.result);
 
@@ -190,14 +187,14 @@ export class HubWebSocket extends HubBase {
 
                 }
                 else {
-                    
+
                     if (!data.result?.success) {
                         // Return the result to the function that initiated the request.
                         reject(new Error(data.result?.error_message));
                     } else {
                         // Send the error to the function that intiated the request.
                         resolve(data.result);
-                    }    
+                    }
                 }
                 this.pendingRequests.delete(data.request_id);
             } else {
@@ -217,7 +214,7 @@ export class HubWebSocket extends HubBase {
         //
         this.socket.onclose = () => {
             self.setIsConnected(false);
-            console.log('WebSocket connection closed.');            
+            console.log('WebSocket connection closed.');
         };
     }
 
@@ -229,13 +226,13 @@ export class HubWebSocket extends HubBase {
      * @param payload The arguments of the command.
      * @returns Promise<CommandMessageResult>
      */
-    invoke = (domain : string, fname: string, payload?: object): Promise<CommandMessageResult> => {
+    invoke = (domain: string, fname: string, payload?: object): Promise<CommandMessageResult> => {
 
         return new Promise((resolve, reject) => {
             const id = ++this.requestId; // Increment and use the request ID
             this.pendingRequests.set(id, { resolve, reject });
 
-            let cm : CommandMessage = {
+            let cm: CommandMessage = {
                 request_id: id,
                 domain: domain,
                 fname: fname,
@@ -250,10 +247,10 @@ export class HubWebSocket extends HubBase {
     handleUnsolicitedMessage = (msg: CommandMessage) => {
         // Handle messages that do not correspond to a pending request
 
-        if (msg.fname === "BROADCAST" 
+        if (msg.fname === "BROADCAST"
             && msg.domain.length >= 1
             && msg.result !== undefined && msg.result !== null
-            && msg.result.data !== undefined && msg.result.data !== null            
+            && msg.result.data !== undefined && msg.result.data !== null
         ) {
 
             let topic = `${msg.domain}/${msg.result.data["topic"]}`;
@@ -266,7 +263,7 @@ export class HubWebSocket extends HubBase {
         // }
     }
 
-    disconnect= (): void => {
+    disconnect = (): void => {
         this.socket.close();
     }
 

package/src/hub/index.ts

@@ -2,7 +2,7 @@
  * Copyright (C) 2024 Automated Design Corp. All Rights Reserved.
  * Created Date: 2024-01-16 21:07:29
  * -----
- * Last Modified: 2024-05-31 07:51:19
+ * Last Modified: 2025-09-05 14:53:01
  * Modified By: ADC
  * -----
  * 
@@ -12,7 +12,7 @@ import { HubBase as Hub } from './HubBase';
 import { HubTauri } from './HubTauri';
 import { HubWebSocket } from "./HubWebSocket";
 import {HubSimulate} from "./HubSimulate"
-import { CommandMessage, CommandMessageResult } from './CommandMessage';
+import type { CommandMessage, CommandMessageResult } from './CommandMessage';
 
 
 let hubInstance: Hub | null = null;

package/src/themes/adc-dark/_extensions.scss

@@ -128,6 +128,163 @@
         font-weight: 500;
     }
 
+    /* ---- ac-toolbar: consistent square icon-button sizing ----
+     *
+     * SVG icons (Lucide, custom <SvgAxis/> ) and PrimeIcon font glyphs
+     * (`<i class="pi pi-...">`) are normalized to render at a consistent
+     * weight inside toolbar buttons. The two need different treatment:
+     *
+     *   - Size   — both: width/height for SVG, font-size for icon font.
+     *   - Weight — SVG only: Lucide ships `stroke-width="2"` on a 24×24
+     *              viewBox; when scaled to 18px the strokes drop to
+     *              effective 1.5px and look thinner than PrimeIcons.
+     *              Setting `stroke-width: 2.25` via CSS (which overrides
+     *              the SVG presentation attribute) restores parity. The
+     *              fill: none / stroke: currentColor lines defend against
+     *              custom SVGs that didn't inherit those by attribute.
+     *   - Align  — `vertical-align: middle` matches PrimeIcon's default
+     *              and prevents baseline drift in non-flex parents.
+     */
+
+    @mixin ac-toolbar-svg-normalize {
+        vertical-align: middle;
+        stroke: currentColor;
+        fill: none;
+        stroke-width: 2.25;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+    }
+
+    .ac-toolbar-icon-btn {
+        width: 19mm;
+        height: 12.7mm;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        svg, i { font-size: 11mm; width: 11mm; height: 11mm; }
+        svg { @include ac-toolbar-svg-normalize; }
+        .p-button-icon { margin: 0; }
+    }
+
+    .ac-toolbar-icon-lg {
+        width: 25.4mm;
+        height: 19mm;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        svg, i { font-size: 16mm; width: 16mm; height: 16mm; }
+        svg { @include ac-toolbar-svg-normalize; }
+        .p-button-icon { margin: 0; }
+    }
+
+    .ac-toolbar-icon-panic {
+        width: 25.4mm;
+        height: 25.4mm;
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+
+        svg { width: 20mm; height: 20mm; @include ac-toolbar-svg-normalize; }
+        .p-button-icon { margin: 0; }
+    }
+
+    /* ---- OverlayPanel + Dialog: comfortable interior padding ----
+     */
+    body .p-component.p-dialog .p-dialog-content {
+        padding: 4mm;
+    }
+
+    body .p-component.p-overlaypanel .p-overlaypanel-content {
+        padding: 4mm;
+    }
+
+
+    :root {
+        --p-dialog-content-padding: 4mm;
+        --p-overlaypanel-content-padding: 4mm;
+    }
+
+    .ac-toolbar-group {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 2px;
+    }
+
+    /* ---- ac-toolbar-tool-list: stacked text buttons in an OverlayPanel ---- */
+    /*
+     * Spacing between buttons uses `gap` on the flex parent rather than
+     * `margin` on the buttons. PrimeReact's `.p-button` rules carry their
+     * own margin reset and tie our `.ac-toolbar-tool-item` on specificity;
+     * because PrimeReact's CSS loads later, its margin wins. Flex `gap`
+     * has no PrimeReact equivalent to fight.
+     */
+    .ac-toolbar-tool-list {
+        display: flex;
+        flex-direction: column;
+        min-width: 16rem;
+        padding: 2mm;
+        gap: 2mm;
+    }
+
+    /* `gap: 0.75rem` here is the *intra-button* spacing — between the
+     * leading icon and the text label — not between buttons. */
+    .ac-toolbar-tool-item {
+        justify-content: flex-start;
+        gap: 0.75rem;
+    }
+
+    /* ---- ac-form: content page form layout ---- */
+
+    .ac-form {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    .ac-form-row {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+
+        > * {
+            min-width: 0;
+        }
+    }
+
+    .ac-form-field {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .ac-form-section {
+        font-size: 11px;
+        font-weight: 700;
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+        color: $primaryColor;
+        border-bottom: 1px solid $shade600;
+        padding-bottom: 4px;
+        margin-top: 6px;
+    }
+
+    .ac-form-label {
+        font-size: 13px;
+        font-weight: 600;
+        color: $textSecondaryColor;
+        white-space: nowrap;
+        flex-shrink: 0;
+    }
+
     .p-picklist-buttons .p-button,
     .p-orderlist-controls .p-button {
         transition: opacity $transitionDuration, background-color $transitionDuration, color $transitionDuration, border-color $transitionDuration, box-shadow $transitionDuration;
@@ -164,3 +321,173 @@
         }
     }
 }
+
+/* Padding for OverlayPanels and Dialogs */
+.p-overlaypanel .p-overlaypanel-content {
+    padding: 4mm !important; 
+}
+
+.p-dialog .p-dialog-content {
+    padding: 4mm !important;
+}
+
+
+/* Padding for fieldset */
+
+.p-fieldset {
+  .p-fieldset-legend {
+    padding: 0.5mm;
+    border-width: 0.5mm;
+    margin-left: 1.5mm;
+  }
+
+  .p-fieldset-content {
+    padding: 1mm;
+  }
+
+  border-width: 0.5mm;
+}
+
+/* 
+ * Padding for dropdown items.
+ * Makes them work better on touchscreens.
+ */
+.p-autocomplete-item {
+    padding-top: 2mm;
+    padding-bottom: 2mm;
+}
+
+.p-dropdown-item-label {
+    padding-top: 2mm;
+    padding-bottom: 2mm;
+}
+
+/*
+ * Clearable dropdowns (showClear): by default PrimeReact floats the clear
+ * "×" over the selected value, where it obscures the text and is hard to
+ * tap. Reserve space at the far right, move the clear icon to the RIGHT of
+ * the chevron, vertically centre it, and give it a button-like bordered
+ * tap target separated from the chevron so the two are easy to target.
+ */
+.ac-dropdown-clearable.p-dropdown {
+    // Push the chevron left to open a gap at the far right for the clear
+    // button, and draw a full-height divider after the chevron.
+    .p-dropdown-trigger {
+        margin-right: 2.75rem;
+        border-right: 1px solid $shade600;
+    }
+
+    .p-dropdown-clear-icon {
+        // Centre on the input's mid-line with a transform so it doesn't
+        // depend on the glyph's exact height (the old margin-top hack left
+        // it sitting low). right places it inside the reserved gap.
+        top: 50%;
+        right: 0.4rem;
+        margin-top: 0;
+        transform: translateY(-50%);
+
+        // Button-like target: padding enlarges the box around the 1rem
+        // glyph without scaling it (content-box), bordered + subtle fill so
+        // it reads as a tappable control distinct from the chevron.
+        box-sizing: content-box;
+        width: 1rem;
+        height: 1rem;
+        padding: 0.4rem;
+        border: 1px solid $shade600;
+        border-radius: $borderRadius;
+        color: $textSecondaryColor;
+        background: rgba(255, 255, 255, 0.04);
+        transition: background-color $transitionDuration,
+                    border-color $transitionDuration,
+                    color $transitionDuration;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.10);
+            border-color: $primaryColor;
+            color: $primaryColor;
+        }
+
+        // PrimeReact decides "clear vs. open" from event.target's
+        // data-pc-section attribute, which lives on the <svg> clear icon
+        // but NOT on its child <path>s. A click landing on the glyph
+        // therefore targets a <path>, fails that test, and just toggles
+        // the list open. Make the inner paths transparent to pointer
+        // events so every click resolves to the <svg> and fires clear.
+        * {
+            pointer-events: none;
+        }
+    }
+}
+
+/*
+ * TestSetupView / TestSetupForm scroll containment.
+ *
+ * The whole view fills its parent and confines overflow to the inner
+ * field/history regions, so the tab strip and the section headers stay
+ * visible instead of the entire page scrolling. All the height plumbing
+ * hangs on `min-height: 0` — without it a flex child refuses to shrink
+ * below its content and the overflow leaks back out to the page.
+ */
+.ac-test-setup-view {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+
+    > .p-tabview {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: 0;
+    }
+
+    .p-tabview-panels {
+        display: flex;
+        flex-direction: column;
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: hidden;
+    }
+
+    .p-tabview-panel {
+        flex: 1 1 auto;
+        min-height: 0;
+        height: 100%;
+    }
+}
+
+/* Project tab: fixed ProjectSelector + scrolling Test History. */
+.ac-test-setup-view__tab {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.ac-test-setup-view__fixed {
+    flex: 0 0 auto;
+}
+
+.ac-test-setup-view__scroll {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+}
+
+/* Test tab: fixed Test-Setup header + scrolling Test-Configuration list. */
+.ac-test-setup-form {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.ac-test-setup-form__head {
+    flex: 0 0 auto;
+}
+
+.ac-test-setup-form__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+}