@visns-studio/visns-components 6.24.4 → 6.26.0

package/src/components/utils/contactChannels.js

@@ -0,0 +1,130 @@
+/**
+ * Phone and email formatting, and the hrefs that make them dialable.
+ *
+ * No React and no CSS import, for the same reason `utils/displayValue.js` has
+ * neither: the rules encoded here are testable under `node --test` rather than
+ * inferred from a rendered tree, and every consumer of a `.jsx` in this repo
+ * has to bring a bundler with it.
+ *
+ * `formatPhoneNumber` LIVED IN `columns/ColumnRenderers.jsx` and is moved here
+ * unchanged. It has two callers now — the phone column renderer, which formats
+ * a number for display, and the card row, which needs the same string beside a
+ * `tel:` href. Two copies of an Australian numbering table is how one screen
+ * starts spelling a mobile differently from the next.
+ */
+
+/**
+ * An Australian phone number, spaced the way the country writes it.
+ *
+ * Anything that does not answer to a known pattern is returned VERBATIM rather
+ * than forced into one — an international number, an extension, a note somebody
+ * typed into the field. Reformatting a string we did not recognise is how a
+ * number becomes undialable.
+ *
+ * @param {*} phoneNumber raw field value
+ * @returns {string} formatted number, or `''` for a blank input
+ */
+export const formatPhoneNumber = (phoneNumber) => {
+    if (!phoneNumber) return '';
+
+    // Remove all non-digit characters. `String()` is the ONE change made in the
+    // move out of ColumnRenderers: the column renderer hands this whatever the
+    // API put in the field, and a numeric phone column used to throw here. It
+    // can only turn a crash into a result — every string input takes the same
+    // branch it always did.
+    let cleanNumber = String(phoneNumber).replace(/\D/g, '');
+
+    // +61 spellings collapse to the local form so every branch below applies.
+    if (cleanNumber.match(/^61[2-9]\d{8}$/)) {
+        cleanNumber = '0' + cleanNumber.slice(2);
+    }
+
+    // Check if it's an Australian mobile number (starts with 04 and has 10 digits)
+    if (cleanNumber.match(/^04\d{8}$/)) {
+        // Mobile format: 0400 000 000
+        return cleanNumber.replace(/(\d{4})(\d{3})(\d{3})/, '$1 $2 $3');
+    }
+
+    // Check if it's a 1300/1800 number (10 digits starting with 1300 or 1800)
+    if (cleanNumber.match(/^1[38]00\d{6}$/)) {
+        // 1300/1800 format: 1300 000 000
+        return cleanNumber.replace(/(\d{4})(\d{3})(\d{3})/, '$1 $2 $3');
+    }
+
+    // Check if it's an Australian landline number (8 digits with area code, or 10 digits total)
+    if (cleanNumber.match(/^0[2-9]\d{8}$/)) {
+        // Landline format: (02) 0000 0000
+        return cleanNumber.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2 $3');
+    }
+
+    // If it doesn't match standard Australian patterns, return as is with some basic formatting
+    if (cleanNumber.length >= 8) {
+        // Generic formatting for longer numbers
+        if (cleanNumber.length === 8) {
+            return cleanNumber.replace(/(\d{4})(\d{4})/, '$1 $2');
+        } else if (cleanNumber.length === 9) {
+            return cleanNumber.replace(/(\d{1})(\d{4})(\d{4})/, '$1 $2 $3');
+        } else if (cleanNumber.length === 10) {
+            return cleanNumber.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2 $3');
+        }
+    }
+
+    // Return original if no formatting pattern matches
+    return phoneNumber;
+};
+
+/**
+ * The `tel:` target for a stored number.
+ *
+ * DELIBERATELY NOT `formatPhoneNumber`'s output: the spaces and brackets that
+ * make a number readable are not part of a dial string, and a leading `+` is
+ * the one non-digit that is — dropping it turns an international number into a
+ * local one that reaches somebody else entirely.
+ *
+ * Returns `null` when there is nothing to dial, so the caller renders plain
+ * text rather than a dead anchor.
+ *
+ * @param {*} value raw field value
+ * @returns {string|null}
+ */
+export const telHref = (value) => {
+    if (value === null || value === undefined) {
+        return null;
+    }
+
+    const raw = String(value).trim();
+
+    if (raw === '') {
+        return null;
+    }
+
+    const digits = raw.replace(/[^\d+]/g, '');
+    // A `+` anywhere but the front is noise from a pasted string.
+    const normalised = digits.startsWith('+')
+        ? '+' + digits.slice(1).replace(/\+/g, '')
+        : digits.replace(/\+/g, '');
+
+    return normalised.replace(/\D/g, '').length >= 4 ? `tel:${normalised}` : null;
+};
+
+/**
+ * The `mailto:` target for a stored address.
+ *
+ * The bar is deliberately low — one `@` with something either side. This is a
+ * display decision, not validation: the address came out of the database and
+ * refusing to link it does not make it any more correct, while linking
+ * something that is plainly not an address (a note, a dash) draws a dead
+ * anchor.
+ *
+ * @param {*} value raw field value
+ * @returns {string|null}
+ */
+export const mailtoHref = (value) => {
+    if (value === null || value === undefined) {
+        return null;
+    }
+
+    const raw = String(value).trim();
+
+    return /^[^\s@]+@[^\s@]+$/.test(raw) ? `mailto:${raw}` : null;
+};

package/src/components/utils/editPlacement.js

@@ -0,0 +1,95 @@
+/**
+ * Where a detail page's action cluster sits — the Edit button and the Save /
+ * Cancel pair that replace it, plus a table tab's bulk actions.
+ *
+ * No React and no CSS import, on the `utils/cardLayout.js` precedent: the only
+ * *decision* in the change is which of two placements a view config asked for,
+ * it is read by every detail page in every application, and it is testable
+ * under `node --test` rather than by squinting at a rendered tree.
+ *
+ * ---------------------------------------------------------------------------
+ * WHY THERE IS A CHOICE AT ALL
+ *
+ * The cluster has always been `position: fixed; bottom: 15px; right: 20px`, and
+ * every detail page in every VISNS CRM is laid out around that. It is the wrong
+ * place twice over and right once:
+ *
+ *   - on a SHORT record the button is stranded in the bottom-right corner of an
+ *     empty viewport, a screen away from the six fields it edits;
+ *   - on a LONG one it floats over the content, and on a phone it lands on top
+ *     of the row actions of whatever grid is under it;
+ *   - but on a page that is one tall form, a control that follows the reader
+ *     down is exactly right, and there are a lot of those.
+ *
+ * So this is not a fix, it is a placement, and the default does not move. A
+ * host that says nothing gets the floating bar it has always had, byte for
+ * byte; `header` is opt-in per view config.
+ *
+ * ---------------------------------------------------------------------------
+ * WHY THE CONFIG IS THE PRIMARY INPUT AND THE PROP ONLY OVERRIDES IT
+ *
+ * The consuming CRMs drive their detail pages from JSON view configs, and most
+ * of those are mounted by a bare `<GenericDetail setting={SomeDetail} />` with
+ * no host JSX to edit — several through a generic route table that has never
+ * heard of the page it is rendering. A prop-only switch would mean a JSX change
+ * per page to move a button, which is how a layout choice ends up applied to
+ * three pages out of thirty and nobody can say why.
+ *
+ * The prop still wins where it is given, because a host that has wrapped
+ * GenericDetail for one page (a facts band, a custom tab) is the one caller
+ * that knows something the config does not.
+ *
+ * An unknown value is NOT an error and must not become one: a config written
+ * against a later version of this library, or a typo, has to render the page
+ * rather than take it down over a button's coordinates. Unknown falls back to
+ * the default, which is also what every existing config means.
+ */
+
+/** The floating bottom-right bar. Today's behaviour, and the default. */
+export const EDIT_PLACEMENT_FLOATING = 'floating';
+
+/** An inline cluster on the right of the record's title row. */
+export const EDIT_PLACEMENT_HEADER = 'header';
+
+/** Every placement this library understands. */
+export const EDIT_PLACEMENTS = [
+    EDIT_PLACEMENT_FLOATING,
+    EDIT_PLACEMENT_HEADER,
+];
+
+/**
+ * Resolve the placement for one detail page.
+ *
+ * @param {object} [setting]   the view config GenericDetail was handed — read
+ *                             as `setting.editPlacement`, deliberately at the
+ *                             config ROOT beside `page` / `filters` / `tabs`
+ *                             rather than per tab: it is a statement about the
+ *                             page's chrome, and a button that moved as you
+ *                             changed tabs would read as a rendering fault.
+ * @param {string} [override]  the `editPlacement` prop, when a host passed one.
+ * @returns {'floating'|'header'}
+ */
+export function resolveEditPlacement(setting, override) {
+    if (EDIT_PLACEMENTS.includes(override)) {
+        return override;
+    }
+
+    const fromConfig = setting?.editPlacement;
+
+    if (EDIT_PLACEMENTS.includes(fromConfig)) {
+        return fromConfig;
+    }
+
+    return EDIT_PLACEMENT_FLOATING;
+}
+
+/**
+ * Whether the resolved placement is the header one.
+ *
+ * A one-line convenience so the render reads as a question about the page
+ * rather than a string comparison repeated at four call sites — the shape that
+ * eventually gets one of them wrong.
+ */
+export function isHeaderPlacement(placement) {
+    return placement === EDIT_PLACEMENT_HEADER;
+}

package/src/components/utils/useDensity.js

@@ -17,6 +17,28 @@ import { useMemo, useState, useEffect, useSyncExternalStore } from 'react';
  * to lay out in JS — the datagrid measures and sizes rows in px — reads them
  * through `useDensity()` so there is one table of numbers instead of a
  * `isTabletMode ? 52 : 32` at every call site.
+ *
+ * ---------------------------------------------------------------------------
+ * AND A THIRD SWITCH NOBODY HAS TO SET: `(pointer: coarse)`.
+ *
+ * Tablet mode was per-view opt-in only, which meant the 44px tap targets and
+ * the 52px rows existed on precisely the handful of views whose JSON happened
+ * to carry `"tabletMode": true` — and nowhere else, including on every phone
+ * and tablet opening every other grid in the product. A 32px row with a 28px
+ * icon button in it is not a target; the finger covers it and the tap lands on
+ * the row underneath.
+ *
+ * So a coarse primary pointer now counts as tablet mode on its own. `pointer`
+ * reports the PRIMARY pointing device, not "is touch available anywhere": a
+ * laptop with a touchscreen and a trackpad answers `fine` and is unaffected,
+ * which is the reason this is safe to turn on for everybody. A phone, a
+ * tablet and a kiosk answer `coarse` and get the roomy geometry without a line
+ * of configuration.
+ *
+ * The explicit switch still works and still means the same thing — it is now
+ * "treat this view as touch even on a mouse", which is exactly what the plant
+ * floor asked for when a gloved hand is driving a desktop. The two are ORed,
+ * never checked against each other.
  */
 
 /**
@@ -77,9 +99,209 @@ export const DEFAULT_DENSITY = 'default';
 const SERVER_SNAPSHOT = `${DEFAULT_DENSITY}|false`;
 
 /**
- * Read both switches off the document as one string. A string (not an object)
+ * The media query that stands in for "this is being driven by a finger".
+ *
+ * Exported so the CSS side can be grepped against one string rather than four
+ * hand-typed copies drifting apart — `styles/DataGrid.module.scss`,
+ * `styles/global-datagrid.css` and `styles/density.css` all carry this exact
+ * condition beside their `body.tablet-mode` selectors.
+ */
+export const COARSE_POINTER_QUERY = '(pointer: coarse)';
+
+/**
+ * The width below which a grid stops trying to fit its columns on screen.
+ *
+ * DELIBERATELY NOT PART OF `DENSITY_GRID`, and not folded into the density
+ * snapshot either. Density answers "how big does a target have to be"; this
+ * answers "is there enough width to lay seven columns out side by side". They
+ * are different questions with different answers — a phone is coarse AND
+ * narrow, a kiosk is coarse and 1920px wide, a desktop browser dragged to a
+ * third of the screen is narrow and fine — and `tests/density.test.mjs` pins
+ * both the density table and the parsed snapshot shape literally, on the
+ * reasoning that those numbers are every existing deployment's layout.
+ *
+ * Exported so the CSS half can be grepped against one string rather than
+ * hand-typed copies drifting apart — `styles/global-datagrid.css` carries this
+ * exact width.
+ */
+export const NARROW_VIEWPORT_QUERY = '(max-width: 640px)';
+
+/**
+ * The floor a column gets when the viewport is narrow, whatever the density.
+ *
+ * `DENSITY_GRID.columnMinWidth` is 80px, which is what seven flex columns
+ * collapse to on a phone — and 80px is not a column, it is an ellipsis. The
+ * measured widths on /contacts: "First Name" needs 127px of label alone,
+ * "Work Phone" 136px, before the sort icon beside it. Every header rendered as
+ * "FI…", "LA…", "TI…" and every cell truncated with it.
+ *
+ * 160px clears the widest of those with room for the icon. Seven of them is
+ * 1120px inside a 356px grid, which is the honest answer: the grid scrolls
+ * sideways INSIDE ITS OWN BODY (`.InovuaReactDataGrid__body` is already the
+ * scroller — the page itself does not move) and every column is readable when
+ * it is reached. The alternative on offer is seven columns of nothing.
+ *
+ * A view config's own `column.minWidth` still wins, so a genuinely narrow
+ * column (a quantity, a status chip) is one line of JSON away.
+ */
+export const NARROW_COLUMN_MIN_WIDTH = 160;
+
+/**
+ * Whether a media query currently matches, as a `useSyncExternalStore` pair.
+ *
+ * Same guards as `hasCoarsePointer` and for the same reasons: `matchMedia` is
+ * missing in jsdom and in every server render, and Safari only grew
+ * `addEventListener` on MediaQueryList in 14. Absent means `false`, which is
+ * the pre-existing behaviour in both cases — a desktop-width grid.
+ */
+const mediaMatches = (query) => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return false;
+    }
+
+    try {
+        return window.matchMedia(query).matches;
+    } catch (unsupported) {
+        return false;
+    }
+};
+
+const subscribeToQuery = (query) => (onChange) => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return () => {};
+    }
+
+    try {
+        const list = window.matchMedia(query);
+
+        if (typeof list.addEventListener === 'function') {
+            list.addEventListener('change', onChange);
+
+            return () => list.removeEventListener('change', onChange);
+        }
+
+        if (typeof list.addListener === 'function') {
+            list.addListener(onChange);
+
+            return () => list.removeListener(onChange);
+        }
+    } catch (unsupported) {
+        // A browser that cannot evaluate the query never reports a change; the
+        // snapshot already read `false` for the same reason.
+    }
+
+    return () => {};
+};
+
+/**
+ * Whether the viewport is too narrow to lay columns out side by side.
+ *
+ * @returns {boolean}
+ */
+export const useNarrowViewport = () => {
+    const subscribe = useMemo(
+        () => subscribeToQuery(NARROW_VIEWPORT_QUERY),
+        []
+    );
+    const getSnapshot = useMemo(
+        () => () => mediaMatches(NARROW_VIEWPORT_QUERY),
+        []
+    );
+
+    return useSyncExternalStore(subscribe, getSnapshot, () => false);
+};
+
+/**
+ * The attribute an app writes to turn phone card rows on for every grid in it.
+ *
+ * Same mechanism as `data-density` and for the same reason: it is set by
+ * whoever owns the page — GenericAuth, from its `cardRows` prop — rather than
+ * by the component reading it, and it has to be readable from CSS as well as
+ * from JS.
+ *
+ * OPT-IN AT THE LIBRARY, because three applications consume this and a
+ * heuristic that titles an unreviewed view badly is a worse phone experience
+ * than the sideways-scrolling table it replaced. A view can still turn card
+ * rows on for itself with `tableSetting.cardLayout`, and off with
+ * `cardLayout: false`, whatever this attribute says.
+ */
+export const CARD_ROWS_ATTRIBUTE = 'data-card-rows';
+
+const readCardRows = () => {
+    if (typeof document === 'undefined' || !document.documentElement) {
+        return 'off';
+    }
+
+    return (
+        document.documentElement.getAttribute(CARD_ROWS_ATTRIBUTE) || 'off'
+    );
+};
+
+const subscribeToCardRows = (onChange) => {
+    if (
+        typeof document === 'undefined' ||
+        typeof MutationObserver === 'undefined' ||
+        !document.documentElement
+    ) {
+        return () => {};
+    }
+
+    const observer = new MutationObserver(onChange);
+
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: [CARD_ROWS_ATTRIBUTE],
+    });
+
+    return () => observer.disconnect();
+};
+
+/**
+ * Whether this application has opted its grids into phone card rows.
+ *
+ * @returns {boolean}
+ */
+export const useCardRowsEnabled = () => {
+    const enabled = useSyncExternalStore(
+        subscribeToCardRows,
+        readCardRows,
+        () => 'off'
+    );
+
+    return enabled === 'on' || enabled === 'true';
+};
+
+/**
+ * Whether the primary pointing device is coarse.
+ *
+ * Wrapped rather than called inline because `matchMedia` is missing in jsdom
+ * and in every server render, and a hook that throws during the first snapshot
+ * takes the whole page with it. Absent means `false`, which is the pre-existing
+ * behaviour and the conservative answer: a mouse-sized target on a touch screen
+ * is awkward, a touch-sized one on a desktop grid is wrong.
+ */
+const hasCoarsePointer = () => {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+        return false;
+    }
+
+    try {
+        return window.matchMedia(COARSE_POINTER_QUERY).matches;
+    } catch (unsupported) {
+        return false;
+    }
+};
+
+/**
+ * Read every switch off the document as one string. A string (not an object)
  * so `useSyncExternalStore` can compare snapshots by value — returning a fresh
  * object from `getSnapshot` makes React re-render forever.
+ *
+ * The class and the pointer are ORed into ONE flag rather than reported
+ * separately: everything downstream — the row heights, the action column, the
+ * checkbox column — wants the same answer to the same question, which is "how
+ * big does a target have to be here". Which of the two switches made it true
+ * is not a distinction any caller has ever needed.
  */
 const readSnapshot = () => {
     if (typeof document === 'undefined') {
@@ -89,9 +311,9 @@ const readSnapshot = () => {
     const density =
         document.documentElement?.getAttribute('data-density') ||
         DEFAULT_DENSITY;
-    const isTablet = Boolean(
-        document.body && document.body.classList.contains('tablet-mode')
-    );
+    const isTablet =
+        Boolean(document.body && document.body.classList.contains('tablet-mode')) ||
+        hasCoarsePointer();
 
     return `${density}|${isTablet}`;
 };
@@ -99,9 +321,16 @@ const readSnapshot = () => {
 const getServerSnapshot = () => SERVER_SNAPSHOT;
 
 /**
- * Notify on either switch changing. Two observers rather than one on the
+ * Notify on any switch changing. Two observers rather than one on the
  * document, because we only care about one attribute on each of two nodes and
- * a subtree observer would fire on every class change anywhere in the app.
+ * a subtree observer would fire on every class change anywhere in the app —
+ * plus one media-query listener for the pointer.
+ *
+ * The pointer listener is not theoretical: an iPad with a Magic Keyboard
+ * attached answers `fine` and detached answers `coarse`, and the change
+ * arrives with no resize, no navigation and no mutation of the document. Every
+ * grid on screen has to re-measure when it happens, or the rows stay at
+ * whatever height they were built for.
  */
 const subscribe = (onChange) => {
     if (
@@ -112,6 +341,31 @@ const subscribe = (onChange) => {
     }
 
     const observers = [];
+    /* Collected separately from `observers` because a MediaQueryList is
+       detached with `removeEventListener`, not `disconnect()`. */
+    const detachers = [];
+
+    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
+        try {
+            const pointer = window.matchMedia(COARSE_POINTER_QUERY);
+
+            // Safari only grew `addEventListener` on MediaQueryList in 14; the
+            // deprecated `addListener` is the fallback and still works
+            // everywhere. Neither is guaranteed, hence the guards.
+            if (typeof pointer.addEventListener === 'function') {
+                pointer.addEventListener('change', onChange);
+                detachers.push(() =>
+                    pointer.removeEventListener('change', onChange)
+                );
+            } else if (typeof pointer.addListener === 'function') {
+                pointer.addListener(onChange);
+                detachers.push(() => pointer.removeListener(onChange));
+            }
+        } catch (unsupported) {
+            // A browser that cannot evaluate the query simply never reports a
+            // change; the snapshot already read `false` for the same reason.
+        }
+    }
 
     if (document.documentElement) {
         const rootObserver = new MutationObserver(onChange);
@@ -131,7 +385,10 @@ const subscribe = (onChange) => {
         observers.push(bodyObserver);
     }
 
-    return () => observers.forEach((observer) => observer.disconnect());
+    return () => {
+        observers.forEach((observer) => observer.disconnect());
+        detachers.forEach((detach) => detach());
+    };
 };
 
 /**
@@ -385,6 +642,45 @@ export const rowsForHeight = (height, chrome, rowUnit) => {
     return Math.max(1, Math.floor(usable / rowUnit));
 };
 
+/**
+ * The shortest a grid may be drawn: its own chrome, plus room for `minRows`.
+ *
+ * THIS IS THE FLOOR THAT WAS MISSING, and its absence is why a grid on a phone
+ * renders a column header, a filter row, a pager and NO DATA AT ALL.
+ *
+ * `useAvailableHeight` answers "how much room is left between this element's
+ * top edge and the bottom of the window", and that answer is applied to the
+ * grid verbatim. On a phone the app header, the page title and a six-tile stat
+ * strip that wraps to three rows put the grid's top edge 610px down a 740px
+ * viewport, so the answer is 130px — while the grid's own furniture (a 39px
+ * column header, a 43px filter row and a 41px pager) is 123px. The body is
+ * handed the remaining SEVEN pixels, less than a row in any density, so the
+ * grid paints its chrome and nothing else.
+ *
+ * `availableHeightFrom` cannot catch this: it only rejects a measurement at or
+ * below zero, and 130 is a perfectly positive number. The measurement is not
+ * wrong — there really is only 130px left — it is just not a height any grid
+ * can be. A grid shorter than its own chrome is never the right answer on any
+ * device, so the floor is unconditional rather than guarded on width: below it
+ * the grid overflows its slot and THE PAGE SCROLLS, which is the behaviour
+ * everybody already expects from a page whose content does not fit.
+ *
+ * It only ever engages when `available` is smaller than the floor, so a
+ * desktop index page — which gets several hundred px — is untouched.
+ *
+ * @param {number} chrome  column header + filter row + footer + pager.
+ * @param {number} pitch   the height one data row occupies.
+ * @param {number} minRows the fewest rows worth drawing a grid for.
+ * @returns {number}
+ */
+export const gridHeightFloor = (chrome, pitch, minRows) => {
+    const rows = Number.isFinite(minRows) && minRows > 0 ? minRows : 1;
+    const safeChrome = Number.isFinite(chrome) && chrome > 0 ? chrome : 0;
+    const safePitch = Number.isFinite(pitch) && pitch > 0 ? pitch : 0;
+
+    return safeChrome + rows * safePitch;
+};
+
 /** How long to wait after a layout change before re-measuring, in ms. */
 export const REMEASURE_DEBOUNCE_MS = 100;
 

package/src/index.js

@@ -48,6 +48,26 @@ import Table from './components/DataGrid';
 import TableFilter from './components/TableFilter';
 import CellWithTooltip from './components/cells/CellWithTooltip';
 import DataGridSearch from './components/controls/DataGridSearch';
+// Phone card rows: the pure mapper that decides what a stacked row says, and
+// the row itself. Exported so a consuming app can check what its own view
+// configs derive to without mounting a grid at 375px.
+import StackedRow from './components/columns/StackedRow';
+import {
+    deriveCardLayout,
+    cardRowHeight,
+    CARD_COLUMN_NAME,
+    MAX_BODY_LINES,
+} from './components/utils/cardLayout';
+// Where a detail page's Edit button sits. Exported for the same reason
+// `deriveCardLayout` is: a consuming app can check what its own view configs
+// resolve to without mounting GenericDetail.
+import {
+    resolveEditPlacement,
+    isHeaderPlacement,
+    EDIT_PLACEMENTS,
+    EDIT_PLACEMENT_FLOATING,
+    EDIT_PLACEMENT_HEADER,
+} from './components/utils/editPlacement';
 import AutoRefreshControls from './components/controls/AutoRefreshControls';
 import AudioPlayer from './components/controls/AudioPlayer';
 import GalleryModal from './components/modals/GalleryModal';
@@ -72,6 +92,7 @@ import AuthShell from './components/auth/AuthShell';
 import AuthLoading from './components/auth/AuthLoading';
 import AuthBrandPanel from './components/auth/AuthBrandPanel';
 import ClientAuthFrame from './components/auth/ClientAuthFrame';
+import ClientAuthScreen from './components/auth/ClientAuthScreen';
 import ClientAuth from './components/auth/ClientAuth';
 import ClientLogin from './components/auth/ClientLogin';
 import ClientOTPVerify from './components/auth/ClientOTPVerify';
@@ -119,6 +140,12 @@ import {
 /** Call Queue Components */
 import CallQueuePop from './components/callQueue/CallQueuePop';
 import CallQueueSettings from './components/callQueue/CallQueueSettings';
+import CallQueueDiagnostics from './components/callQueue/CallQueueDiagnostics';
+import {
+    CALL_POP_STATUS_EVENT,
+    getCallPopStatus,
+    updateCallPopStatus,
+} from './components/callQueue/callPopStatus';
 
 // Vault — the staff password manager. VaultQuickSearch mounts through
 // Navigation's `renderers` slot; VaultManager is the page behind it.
@@ -334,8 +361,12 @@ export {
     buildEnv,
     BusinessCardOcr,
     Call,
+    CALL_POP_STATUS_EVENT,
+    CallQueueDiagnostics,
     CallQueuePop,
     CallQueueSettings,
+    getCallPopStatus,
+    updateCallPopStatus,
     cleanBase32,
     decodeFromBlob,
     decodeFromSource,
@@ -446,6 +477,7 @@ export {
     ClientAssociationManager,
     ClientAuth,
     ClientAuthFrame,
+    ClientAuthScreen,
     ClientLogin,
     ClientOTPVerify,
     ClientPortal,
@@ -456,11 +488,17 @@ export {
     confirmDialog,
     contactHint,
     CustomFetch,
+    CARD_COLUMN_NAME,
+    cardRowHeight,
     DataGrid,
     DataGridSearch,
+    deriveCardLayout,
     DatePickerPortal,
     DEFAULT_AUTH_ENDPOINTS,
     DEFAULT_CLIENT_PATHS,
+    EDIT_PLACEMENT_FLOATING,
+    EDIT_PLACEMENT_HEADER,
+    EDIT_PLACEMENTS,
     DEFAULT_CLIENT_PROTOCOL,
     DEFAULT_CONTACT_HINTS,
     DENSITY_GRID,
@@ -532,6 +570,8 @@ export {
     resolveAuthEndpoints,
     resolveClientPaths,
     resolveClientProtocol,
+    resolveEditPlacement,
+    isHeaderPlacement,
     resolveFormVariant,
     // Passkeys (WebAuthn). Exported so a consuming app can build its own
     // enrolment screen against the same marshalling the login screen uses.
@@ -550,6 +590,8 @@ export {
     showConfirmDialog,
     SortableList,
     StagePopupModal,
+    MAX_BODY_LINES,
+    StackedRow,
     StandardModal,
     syncCsrfFromResponse,
     syncCsrfToken,