@visns-studio/visns-components 6.21.0 → 6.23.1

package/src/components/sms/SmsThreadPanel.jsx

@@ -10,6 +10,7 @@ import {
     Archive,
     ArchiveRestore,
     ArrowLeft,
+    CheckSquare,
     ChevronUp,
     ExternalLink,
     FileText,
@@ -30,6 +31,7 @@ import useSmsLive, { defaultChannelFor } from './useSmsLive';
 import useDebouncedValue from '../vault/useDebouncedValue';
 import {
     MAX_SEGMENTS,
+    annotationsForMessage,
     clockTime,
     composerPlaceholder,
     counterLabel,
@@ -42,6 +44,7 @@ import {
     nextPlaceholder,
     normaliseNumberForDisplay,
     prependMessages,
+    resolveAnnotations,
     segmentCount,
     statusLabel,
     threadDisplayName,
@@ -83,6 +86,13 @@ let temporaryId = 0;
  * subscription, in which case the parent passes `subscribe={false}` and feeds
  * it events. Two subscriptions to one channel is not an error, but it is two
  * websocket authorisations and two copies of every message to reconcile.
+ *
+ * `messageSelection` and `messageAnnotations` are the two hooks a host has into
+ * the timeline. Both are opt-in and both are deliberately nameless about what
+ * the host does with them: this module knows about messages, and an application
+ * that wants to file them against something of its own (a task, a complaint, a
+ * file note) supplies the verb and the badges. Absent, the panel behaves
+ * exactly as it did before they existed.
  */
 const SmsThreadPanel = ({
     threadId,
@@ -107,6 +117,23 @@ const SmsThreadPanel = ({
     lines = null,
     canManage = false,
     clientUrl = (id) => `/clients/${id}`,
+    // `{label, onSelect}` — turns on a Select mode over the timeline. `label` is
+    // the verb printed on the confirm button ("Attach to task…"), `onSelect` is
+    // called as `onSelect(messages, thread)` and may return a promise; the mode
+    // closes when it settles.
+    //
+    // The thread is the SECOND argument, so a host that already knows which
+    // conversation it mounted (a client's own page) can ignore it. A host that
+    // does not — an inbox, where the pane chooses the thread — has no other way
+    // to know which one is open or which client it is linked to.
+    messageSelection = null,
+    // `{[messageId]: [{id, label, onClick}]}` — small chips under the matching
+    // bubble. The host owns what they say and what a click does.
+    //
+    // May also be a function `(thread) => map`, for the same reason: chips in an
+    // inbox depend on which conversation is open, and no host can hold one map
+    // for every thread in the practice.
+    messageAnnotations = null,
     onThreadChange,
     onMessage,
     onBack = null,
@@ -130,6 +157,10 @@ const SmsThreadPanel = ({
     const [linkOpen, setLinkOpen] = useState(false);
     const [simulateOpen, setSimulateOpen] = useState(false);
 
+    const [selecting, setSelecting] = useState(false);
+    const [selectedIds, setSelectedIds] = useState([]);
+    const [confirmingSelection, setConfirmingSelection] = useState(false);
+
     const mountedRef = useRef(true);
     const timelineRef = useRef(null);
     const composerRef = useRef(null);
@@ -445,6 +476,97 @@ const SmsThreadPanel = ({
         [enterSends, submit]
     );
 
+    /* ------------------------------------------------------------ selection */
+
+    const selectionEnabled =
+        Boolean(messageSelection) && typeof messageSelection.onSelect === 'function';
+
+    // Moving to another conversation abandons whatever was ticked in the last
+    // one: the selection is a list of ids from a timeline that is no longer on
+    // screen, and carrying it across would file one client's messages from
+    // another client's page.
+    useEffect(() => {
+        setSelecting(false);
+        setSelectedIds([]);
+    }, [threadId]);
+
+    // Withdrawing the prop has to close the mode with it, or a host that turns
+    // selection off mid-render leaves the bar stranded with no way out.
+    useEffect(() => {
+        if (!selectionEnabled) {
+            setSelecting(false);
+            setSelectedIds([]);
+        }
+    }, [selectionEnabled]);
+
+    const isSelected = useCallback(
+        (id) => selectedIds.some((one) => String(one) === String(id)),
+        [selectedIds]
+    );
+
+    const toggleSelected = useCallback((id) => {
+        setSelectedIds((prev) =>
+            prev.some((one) => String(one) === String(id))
+                ? prev.filter((one) => String(one) !== String(id))
+                : [...prev, id]
+        );
+    }, []);
+
+    const cancelSelection = useCallback(() => {
+        setSelecting(false);
+        setSelectedIds([]);
+    }, []);
+
+    const confirmSelection = useCallback(() => {
+        if (!selectionEnabled || selectedIds.length === 0 || confirmingSelection) return;
+
+        // The host is handed the message objects, not the ids: it should not
+        // have to hold a second copy of the timeline to know what it was given.
+        // Timeline order, not tick order — a conversation extract only reads
+        // correctly in the order it happened.
+        const chosen = messages.filter((one) => isSelected(one.id));
+
+        setConfirmingSelection(true);
+
+        Promise.resolve(messageSelection.onSelect(chosen, thread))
+            .then(() => {
+                if (!mountedRef.current) return;
+
+                setSelecting(false);
+                setSelectedIds([]);
+            })
+            .catch(() => {
+                // A failed hand-off leaves the ticks where they are so the user
+                // can try again; the host is the one that says what went wrong.
+            })
+            .then(() => {
+                if (mountedRef.current) setConfirmingSelection(false);
+            });
+    }, [
+        selectionEnabled,
+        selectedIds,
+        confirmingSelection,
+        messages,
+        isSelected,
+        messageSelection,
+        thread,
+    ]);
+
+    /**
+     * The chip map for the conversation on screen. A function form is called
+     * with the whole thread rather than its id, because what a host looks chips
+     * up by is usually the client on it.
+     */
+    const annotations = useMemo(
+        () => resolveAnnotations(messageAnnotations, thread),
+        [messageAnnotations, thread]
+    );
+
+    const annotationsFor = useCallback(
+        (id) => annotationsForMessage(annotations, id),
+        [annotations]
+    );
+
     /* -------------------------------------------------------------- actions */
 
     const patchThread = useCallback(
@@ -589,6 +711,44 @@ const SmsThreadPanel = ({
         const attachments = Array.isArray(message.attachments) ? message.attachments : [];
         // A failure is never silent, whatever else the run is doing.
         const showMeta = lastOfRun || failed || heldMessage;
+        const chips = annotationsFor(message.id);
+        // A message still on its way to the server has a temporary id, so there
+        // is nothing a host could file it against yet.
+        const tickable = selecting && !message.pending;
+        const ticked = tickable && isSelected(message.id);
+
+        const bubble = (
+            <div
+                className={[
+                    styles.bubble,
+                    outgoing ? styles.bubbleBodyOut : styles.bubbleBodyIn,
+                    heldMessage ? styles.bubbleHeld : '',
+                    failed ? styles.bubbleFailed : '',
+                    message.pending ? styles.bubblePending : '',
+                ]
+                    .filter(Boolean)
+                    .join(' ')}
+            >
+                {message.body}
+
+                {attachments.length > 0 && (
+                    <div className={styles.attachments}>
+                        {attachments.map((file) => (
+                            <a
+                                key={file.id}
+                                className={styles.attachment}
+                                href={file.download_url}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                            >
+                                <FileText size={12} strokeWidth={2} aria-hidden="true" />
+                                <span>{file.name}</span>
+                            </a>
+                        ))}
+                    </div>
+                )}
+            </div>
+        );
 
         return (
             <div
@@ -601,36 +761,52 @@ const SmsThreadPanel = ({
                     .filter(Boolean)
                     .join(' ')}
             >
-                <div
-                    className={[
-                        styles.bubble,
-                        outgoing ? styles.bubbleBodyOut : styles.bubbleBodyIn,
-                        heldMessage ? styles.bubbleHeld : '',
-                        failed ? styles.bubbleFailed : '',
-                        message.pending ? styles.bubblePending : '',
-                    ]
-                        .filter(Boolean)
-                        .join(' ')}
-                >
-                    {message.body}
-
-                    {attachments.length > 0 && (
-                        <div className={styles.attachments}>
-                            {attachments.map((file) => (
-                                <a
-                                    key={file.id}
-                                    className={styles.attachment}
-                                    href={file.download_url}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
+                {selecting ? (
+                    // The whole row is the hit target while selecting: ticking
+                    // a message by aiming at a 14px box is not how anybody
+                    // picks three texts out of a conversation.
+                    <label
+                        className={[
+                            styles.pickRow,
+                            ticked ? styles.pickRowOn : '',
+                            message.pending ? styles.pickRowOff : '',
+                        ]
+                            .filter(Boolean)
+                            .join(' ')}
+                    >
+                        <input
+                            type="checkbox"
+                            className={styles.pickBox}
+                            checked={ticked}
+                            disabled={!tickable}
+                            onChange={() => toggleSelected(message.id)}
+                        />
+                        {bubble}
+                    </label>
+                ) : (
+                    bubble
+                )}
+
+                {chips.length > 0 && (
+                    <div className={styles.annotations}>
+                        {chips.map((annotation) =>
+                            typeof annotation.onClick === 'function' ? (
+                                <button
+                                    key={annotation.id}
+                                    type="button"
+                                    className={`${styles.annotation} ${styles.annotationAction}`}
+                                    onClick={() => annotation.onClick(annotation)}
                                 >
-                                    <FileText size={12} strokeWidth={2} aria-hidden="true" />
-                                    <span>{file.name}</span>
-                                </a>
-                            ))}
-                        </div>
-                    )}
-                </div>
+                                    {annotation.label}
+                                </button>
+                            ) : (
+                                <span key={annotation.id} className={styles.annotation}>
+                                    {annotation.label}
+                                </span>
+                            )
+                        )}
+                    </div>
+                )}
 
                 {showMeta && (
                     <div
@@ -703,6 +879,22 @@ const SmsThreadPanel = ({
                         </a>
                     ) : null}
 
+                    {selectionEnabled && (
+                        <button
+                            type="button"
+                            className={`${styles.ghostButton} ${
+                                selecting ? styles.ghostButtonOn : ''
+                            }`.trim()}
+                            aria-pressed={selecting}
+                            onClick={() =>
+                                selecting ? cancelSelection() : setSelecting(true)
+                            }
+                        >
+                            <CheckSquare size={14} strokeWidth={2} aria-hidden="true" />
+                            {selecting ? 'Done' : 'Select'}
+                        </button>
+                    )}
+
                     <button
                         type="button"
                         className={styles.ghostButton}
@@ -797,6 +989,42 @@ const SmsThreadPanel = ({
                 ))}
             </div>
 
+            {/*
+              * While selecting, the action bar stands where the composer does.
+              * Both at once would be a pane with two footers and two primary
+              * buttons, and picking messages out of a conversation is not
+              * something anybody does halfway through writing a reply.
+              */}
+            {selecting ? (
+                <div className={styles.selectBar}>
+                    <span className={styles.selectCount}>
+                        {selectedIds.length === 0
+                            ? 'Pick the messages you want'
+                            : `${selectedIds.length} selected`}
+                    </span>
+
+                    <div className={styles.selectActions}>
+                        <button
+                            type="button"
+                            className={styles.ghostButton}
+                            onClick={cancelSelection}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            type="button"
+                            className={styles.primaryButton}
+                            onClick={confirmSelection}
+                            disabled={selectedIds.length === 0 || confirmingSelection}
+                        >
+                            {confirmingSelection && (
+                                <Loader2 size={14} className={styles.spin} aria-hidden="true" />
+                            )}
+                            {messageSelection.label || 'Select'} ({selectedIds.length})
+                        </button>
+                    </div>
+                </div>
+            ) : (
             <div className={styles.composer}>
                 <div className={styles.composerBox}>
                     <textarea
@@ -905,6 +1133,7 @@ const SmsThreadPanel = ({
                     </div>
                 </div>
             </div>
+            )}
 
             <LinkClientModal
                 open={linkOpen}

package/src/components/sms/smsHelpers.js

@@ -1202,7 +1202,43 @@ export const describeRecipient = (input) => {
     };
 };
 
+/* -------------------------------------------------------------------------- *
+ * Host annotations
+ *
+ * A host may hand the conversation pane chips to draw under particular
+ * messages. Two shapes, because two kinds of host need it:
+ *
+ *   - a MAP, `{[messageId]: [chip]}`, for a screen that already knows which
+ *     conversation it mounted — a client's own page;
+ *   - a FUNCTION of the open thread, for a screen that does not — an inbox,
+ *     where the pane chooses the thread and no host could hold one map for
+ *     every conversation in the practice.
+ *
+ * Both live here rather than inside the component so the shape has a test.
+ * -------------------------------------------------------------------------- */
+
+/** The chip map for one conversation, whichever shape the host passed. */
+export const resolveAnnotations = (annotations, thread) => {
+    const resolved =
+        typeof annotations === 'function' ? annotations(thread) : annotations;
+
+    return resolved && typeof resolved === 'object' ? resolved : null;
+};
+
+/**
+ * The chips for one message. Looked up by the id as given AND as a string: a
+ * map parsed out of JSON has string keys, and the timeline's ids are numbers.
+ */
+export const annotationsForMessage = (annotations, id) => {
+    if (!annotations) return [];
+
+    const found = annotations[id] ?? annotations[String(id)];
+
+    return Array.isArray(found) ? found : [];
+};
+
 export default {
+    annotationsForMessage,
     badgeCount,
     clientRecipient,
     clockTime,
@@ -1229,6 +1265,7 @@ export default {
     prependMessages,
     RECIPIENT_HINTS,
     relativeTime,
+    resolveAnnotations,
     segmentCount,
     smsHref,
     splitPersonName,

package/src/components/styles/DataGrid.module.scss

@@ -697,6 +697,16 @@
     width: 100%;
     font-size: 0.9rem;
     box-sizing: border-box;
+    // The input is type="search" (to sidestep host apps' global text-input
+    // rules), so strip WebKit's search decorations to keep it looking like
+    // the plain field it always was.
+    appearance: none;
+    -webkit-appearance: none;
+
+    &::-webkit-search-decoration,
+    &::-webkit-search-cancel-button {
+        -webkit-appearance: none;
+    }
 
     &:focus {
         outline: none;

package/src/components/styles/GenericDetail.module.scss

@@ -1362,8 +1362,12 @@
 /* It stays pinned bottom-right — every detail page in every project is laid
    out around that — but it had no ground of its own, so on a short page the
    buttons floated over the page background with nothing behind them. A pill
-   with the same elevation as the panels gives them somewhere to sit. */
-.polActions {
+   with the same elevation as the panels gives them somewhere to sit.
+
+   ONLY when there is more than one of them: a tray around a single solid
+   button reads as a white oval drawn around it, not as ground. A lone
+   button carries its own elevation instead. */
+.polActions:has(> :nth-child(2)) {
     padding: 0.4rem;
     border: 1px solid var(--gd-line);
     border-radius: var(--radius-pill, 999px);
@@ -1374,6 +1378,12 @@
         0 16px 32px -14px color-mix(in srgb, var(--primary-color, #1b3933) 30%, transparent);
 }
 
+.polActions:not(:has(> :nth-child(2))) > * {
+    box-shadow:
+        0 2px 4px color-mix(in srgb, var(--primary-color, #1b3933) 12%, transparent),
+        0 12px 24px -12px color-mix(in srgb, var(--primary-color, #1b3933) 35%, transparent);
+}
+
 /* -- states --------------------------------------------------------------- */
 
 .noDataMessage {

package/src/components/styles/JsonView.module.scss

@@ -0,0 +1,233 @@
+@use 'surface' as *;
+
+/**
+ * JsonView — a parsed JSON value drawn as a collapsible tree.
+ *
+ * The palette is the page-primitive one (`_surface.scss`): two levels, so a
+ * project that defines nothing gets something legible and a page that already
+ * has a palette sets `--vs-*` once on its own root. Nothing here carries a
+ * colour of its own except the four type tints, and even those are mixed
+ * against the app's body ink rather than declared outright — see below.
+ *
+ * Sizing is the CALLER's job. The root has no height, no scroll and no border:
+ * a tree inside a modal wants a capped scroll region, the same tree on a page
+ * wants to be as tall as it is, and a component that decides that itself is one
+ * the next screen has to fight.
+ */
+
+$jv-mono: 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
+
+.root {
+    @include surface-tokens;
+
+    /**
+     * The type tints, and why each is a MIX rather than a hex value.
+     *
+     * A JSON viewer needs four inks that are distinguishable from each other
+     * and readable on the page behind them — and this library does not know
+     * which page that is. A fixed `#1f8b4c` is a fine green on white and an
+     * unreadable one on a dark surface.
+     *
+     * Mixing the hue with the app's own body ink solves both directions at
+     * once: on a light theme the ink is near-black, so the hue darkens and
+     * gains contrast against white; on a dark theme the ink is near-white, so
+     * the SAME declaration lightens it against the dark ground. The hue stays
+     * recognisable either way because it is three quarters of the mix.
+     */
+    --jv-key: var(--vs-json-key, color-mix(in srgb, var(--pr-heading) 80%, var(--pr-ink)));
+    --jv-string: var(--vs-json-string, color-mix(in srgb, #1f8b4c 74%, var(--pr-ink)));
+    --jv-number: var(--vs-json-number, color-mix(in srgb, #2f6fd0 74%, var(--pr-ink)));
+    --jv-boolean: var(
+        --vs-json-boolean,
+        color-mix(in srgb, #8a5cd0 74%, var(--pr-ink))
+    );
+    // The indent guide is a hairline that must read as structure and not as a
+    // border; the page's own line colour is too heavy repeated every level.
+    --jv-guide: var(--vs-json-guide, color-mix(in srgb, var(--pr-ink) 16%, transparent));
+
+    color: var(--pr-ink);
+    font-family: $jv-mono;
+    // Small and tight: the value of this view over a textarea is how much of
+    // the document fits on one screen.
+    font-size: 0.76rem;
+    line-height: 1.45;
+    text-align: left;
+    // A long unbroken token — a URL, a base64 blob — must wrap rather than
+    // push a horizontal scrollbar under the whole tree.
+    overflow-wrap: anywhere;
+}
+
+/* The size is declared on the elements as well as the root: inherited
+   font-size loses to ANY rule that names the element directly, however
+   specific the ancestor — and this tree mounts inside host apps whose global
+   stylesheets do exactly that to li, span and button. Restating `inherit`
+   here puts a declaration on every element, outranking a host's bare
+   element rules (0-0-1 vs this 0-1-0). `:where()` keeps the inner selector
+   at zero so the file's own later, smaller sizes (`.more`) still win. */
+.root :where(ul, li, span, button) {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+.list {
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+/* Each level is indented by its own guide line, so the depth is readable
+   without counting spaces. */
+.children {
+    padding-left: 0.7rem;
+    margin-left: 0.28rem;
+    border-left: 1px solid var(--jv-guide);
+}
+
+.row {
+    // The host CRM styles bare list items in places; nothing here inherits
+    // anything it needs. Same reasoning as Vault.module.scss's header.
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+.line {
+    display: flex;
+    gap: 0.3rem;
+    align-items: flex-start;
+    min-width: 0;
+}
+
+/* Sits under the caret of a node that has one, so keys line up whether or not
+   the row is expandable. */
+.spacer {
+    flex: 0 0 0.85rem;
+    width: 0.85rem;
+}
+
+.toggle {
+    display: inline-flex;
+    gap: 0.3rem;
+    align-items: flex-start;
+    box-sizing: border-box;
+    width: auto;
+    min-width: 0;
+    height: auto;
+    min-height: 0;
+    padding: 0 0.15rem 0 0;
+    margin: 0;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    text-transform: none;
+    letter-spacing: normal;
+    background: none;
+    border: 0;
+    border-radius: var(--pr-radius, 6px);
+    box-shadow: none;
+    cursor: pointer;
+    appearance: none;
+
+    &:hover {
+        background: var(--pr-quiet);
+    }
+
+    &:focus-visible {
+        outline: 2px solid var(--pr-accent);
+        outline-offset: 1px;
+    }
+}
+
+.caret {
+    flex: 0 0 0.85rem;
+    width: 0.85rem;
+    color: var(--pr-muted);
+    /* The two glyphs have different optical widths; a fixed box stops the key
+       beside them shifting by a pixel on every open and close. */
+    text-align: left;
+}
+
+.key {
+    color: var(--jv-key);
+    font-weight: 600;
+}
+
+/* An array index is not a name, and painting it like one makes a long list look
+   like a hundred different keys. */
+.index {
+    color: var(--pr-muted);
+}
+
+.colon {
+    color: var(--pr-muted);
+    font-weight: 400;
+}
+
+/* `{…} 5 keys`, and the brackets of an open node. */
+.summary {
+    color: var(--pr-muted);
+}
+
+.valueCell {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    align-items: baseline;
+    min-width: 0;
+}
+
+.string {
+    color: var(--jv-string);
+}
+
+/* The expanded form of a multi-line string. This is where the vault's
+   credentials actually live — a `content` field with embedded newlines — so the
+   line breaks are the content, not whitespace to be collapsed. */
+.stringOpen {
+    display: block;
+    white-space: pre-wrap;
+}
+
+.number {
+    color: var(--jv-number);
+    font-variant-numeric: tabular-nums;
+}
+
+.boolean {
+    color: var(--jv-boolean);
+    font-weight: 600;
+}
+
+.null {
+    color: var(--pr-muted);
+    font-style: italic;
+}
+
+/* "show all" / "show less" on a truncated value. A link rather than a chip: it
+   sits inside a line of text and must not become the loudest thing on it. */
+.more {
+    box-sizing: border-box;
+    width: auto;
+    height: auto;
+    min-width: 0;
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    color: var(--pr-accent);
+    font: inherit;
+    font-size: 0.72rem;
+    text-decoration: underline;
+    text-transform: none;
+    letter-spacing: normal;
+    background: none;
+    border: 0;
+    box-shadow: none;
+    cursor: pointer;
+    appearance: none;
+
+    &:focus-visible {
+        outline: 2px solid var(--pr-accent);
+        outline-offset: 2px;
+    }
+}