domma-cms 0.106.0 → 0.107.0

package/plugins/_lib/public/call/call.js

@@ -27,8 +27,9 @@ const ico = (name) => `<span class="dmc-ico" data-icon="${name}" data-icon-size=
 const pair = (cond, on, off) => `<span class="dmc-i" data-bind-hidden="!(${cond})">${ico(on)}</span><span class="dmc-i" data-bind-hidden="${cond}">${ico(off)}</span>`;
 
 /**
- * The screen. In the call it is a dark stage (tiles, a top bar, a floating control bar whose labels are for
- * screen readers and the hover tooltip - CSS reads aria-label) beside a WhatsApp-style chat panel.
+ * The screen. The whole of it is a full-bleed layer below the site's header (layout()). In the call: a slate
+ * stage (a slim top bar, tiles that fill it, a docked control bar - icon + label, icons only on a phone) beside a
+ * chat panel.
  * Chat rows are plain objects built in JS (see addItem) - every string reaches the page as textContent.
  */
 const TEMPLATE = `
@@ -113,12 +114,18 @@ const TEMPLATE = `
       </div>
 
       <nav class="dmc-bar" aria-label="Call controls">
+        <div class="dmc-bar-side" aria-hidden="true"></div>
+        <div class="dmc-bar-mid">
         <button type="button" class="dmc-btn dmc-tool" data-on-click="toggleMic" data-bind-class="!micOn.value && 'is-off'" data-bind-aria-pressed="!micOn.value" data-bind-aria-label="micOn.value ? 'Mute' : 'Unmute'">${pair('micOn.value', 'mic', 'mic-off')}<span class="dmc-lbl" data-bind-text="micOn.value ? 'Mute' : 'Unmute'"></span></button>
         <button type="button" class="dmc-btn dmc-tool" data-on-click="toggleCam" data-bind-class="!camOn.value && 'is-off'" data-bind-aria-pressed="!camOn.value" data-bind-aria-label="camOn.value ? 'Stop video' : 'Start video'">${pair('camOn.value', 'video', 'video-off')}<span class="dmc-lbl" data-bind-text="camOn.value ? 'Stop video' : 'Start video'"></span></button>
-        <button type="button" class="dmc-btn dmc-tool dmc-tool--share" data-on-click="toggleShare" data-bind-hidden="!canShare" data-bind-class="sharing.value && 'is-on'" data-bind-aria-pressed="sharing.value" data-bind-aria-label="sharing.value ? 'Stop sharing' : 'Share your screen'">${ico('monitor')}<span class="dmc-lbl" data-bind-text="sharing.value ? 'Stop sharing' : 'Share screen'"></span></button>
-        <button type="button" class="dmc-btn dmc-tool dmc-tool--chat" data-on-click="toggleSide" data-bind-class="sideOpen.value && 'is-on'" data-bind-aria-pressed="sideOpen.value" data-bind-aria-label="chatLabel.value">${ico('message-circle')}<span class="dmc-lbl" data-bind-text="chatLabel.value"></span><span class="dmc-badge" data-bind-hidden="!unread.value || sideOpen.value" data-bind-text="unreadText.value"></span></button>
+        <button type="button" class="dmc-btn dmc-tool dmc-tool--share" data-on-click="toggleShare" data-bind-hidden="!canShare" data-bind-class="sharing.value && 'is-on'" data-bind-aria-pressed="sharing.value" data-bind-aria-label="sharing.value ? 'Stop sharing' : 'Share your screen'">${ico('monitor')}<span class="dmc-lbl" data-bind-text="sharing.value ? 'Stop share' : 'Share'"></span></button>
+        <button type="button" class="dmc-btn dmc-tool dmc-tool--chat" data-on-click="toggleSide" data-bind-class="sideOpen.value && 'is-on'" data-bind-aria-pressed="sideOpen.value" data-bind-aria-label="chatLabel.value">${ico('message-circle')}<span class="dmc-lbl">Chat</span><span class="dmc-badge" data-bind-hidden="!unread.value || sideOpen.value" data-bind-text="unreadText.value"></span></button>
+        <button type="button" class="dmc-btn dmc-tool dmc-tool--invite" data-slot="invite" data-on-click="toggleInvite" data-bind-hidden="!canInvite.value" data-bind-class="inviteOpen.value && 'is-on'" data-bind-aria-pressed="inviteOpen.value" aria-label="Add people">${ico('user-plus')}<span class="dmc-lbl">Add people</span></button>
         <button type="button" class="dmc-btn dmc-tool dmc-btn--rec" data-on-click="toggleRecord" data-bind-hidden="!(host.value && recordingAllowed.value && canRecord)" data-bind-class="iRecord.value && 'is-on'" data-bind-aria-pressed="iRecord.value" data-bind-aria-label="iRecord.value ? 'Stop recording' : 'Record the call'">${ico('circle')}<span class="dmc-lbl" data-bind-text="iRecord.value ? 'Stop recording' : 'Record'"></span></button>
+        </div>
+        <div class="dmc-bar-side dmc-bar-end">
         <button type="button" class="dmc-btn dmc-tool dmc-btn--leave" data-on-click="leave" aria-label="Leave the call">${ico('phone-off')}<span class="dmc-lbl">Leave</span></button>
+        </div>
       </nav>
     </div>
 
@@ -133,7 +140,8 @@ const TEMPLATE = `
           <li data-bind-class="cls" data-bind-data-hue="hue">
             <div class="dmc-day" data-bind-hidden="!day"><span data-bind-text="day"></span></div>
             <div class="dmc-sys" data-bind-hidden="!sys"><span data-bind-text="text"></span></div>
-            <div class="dmc-bubble" data-bind-hidden="sys"><span class="dmc-from" data-bind-hidden="!showName" data-bind-text="name"></span><span class="dmc-text" data-bind-text="text"></span><span class="dmc-time" data-bind-text="time"></span></div>
+            <div class="dmc-meta" data-bind-hidden="!showMeta"><span class="dmc-from" data-bind-hidden="!showName" data-bind-text="name"></span><span class="dmc-time" data-bind-text="time"></span></div>
+            <div class="dmc-bubble" data-bind-hidden="sys" data-bind-title="time"><span class="dmc-text" data-bind-text="text"></span></div>
           </li>
         </ol>
         <p class="dmc-chat-empty" data-bind-hidden="messages.value.length">No messages yet. Messages are seen by everyone in the call.</p>
@@ -144,6 +152,62 @@ const TEMPLATE = `
         <button type="submit" class="dmc-btn dmc-sendbtn" aria-label="Send" data-bind-disabled="!canSend.value">${ico('send')}</button>
       </form>
     </aside>
+
+    <aside class="dmc-invite" aria-label="Add people" data-bind-class="inviteOpen.value && 'is-open'" data-bind-aria-hidden="!inviteOpen.value" data-bind-inert="!inviteOpen.value">
+      <header class="dmc-chat-head">
+        <button type="button" class="dmc-chat-back" data-on-click="toggleInvite" aria-label="Back to the call">${ico('arrow-left')}</button>
+        <div class="dmc-chat-titles"><h3>Add people</h3><span data-bind-text="inviteSub.value"></span></div>
+        <button type="button" class="dmc-chat-close" data-on-click="toggleInvite" aria-label="Close Add people">${ico('x')}</button>
+      </header>
+      <div class="dmc-inv-body">
+        <p class="dmc-inv-only" data-bind-hidden="inviteSearch.value || inviteTyped.value">Make a link for each person you want to add and pass it on yourself - by email, text or chat. Each link is theirs alone: they type their name and knock, and you let them in.</p>
+        <div class="dmc-inv-find" data-bind-hidden="!inviteSearch.value">
+        <label class="dmc-inv-search"><span class="dmc-inv-sico" aria-hidden="true">${ico('search')}</span>
+          <input class="dmc-inv-input dmc-inv-q" type="search" data-model="query.value" data-on-input="searchSoon" maxlength="100" autocomplete="off" data-bind-placeholder="searchHint.value" data-bind-aria-label="searchHint.value"></label>
+        <div class="dmc-inv-chips" data-bind-hidden="!picked.value.length" aria-label="Adding">
+          <ul data-each="picked key=key">
+            <li class="dmc-inv-chip"><span class="dmc-inv-chipname" data-bind-text="name"></span><span class="dmc-inv-chipkind" data-bind-text="badge"></span>
+              <button type="button" class="dmc-inv-chipx" data-on-click="$parent.unpick($data)" data-bind-aria-label="removeLabel"><span class="dmc-i">${ico('x')}</span></button></li>
+          </ul>
+        </div>
+        <p class="dmc-inv-label" data-bind-text="foundTitle.value"></p>
+        <ul class="dmc-inv-list" data-each="found key=key">
+          <li><button type="button" class="dmc-inv-row" data-on-click="$parent.pick($data)" data-bind-class="picked.value && 'is-picked'" data-bind-aria-pressed="picked.value">
+            <span class="dmc-inv-av" aria-hidden="true" data-bind-text="initial"></span>
+            <span class="dmc-inv-who"><span class="dmc-inv-name" data-bind-text="name"></span><span class="dmc-inv-mail" data-bind-hidden="!email" data-bind-text="email"></span></span>
+            <span class="dmc-inv-kind" data-bind-data-kind="kind" data-bind-text="badge"></span>
+            <span class="dmc-inv-tick" aria-hidden="true"><span class="dmc-i">${ico('check')}</span></span>
+          </button></li>
+        </ul>
+        <p class="dmc-inv-empty" data-bind-hidden="!emptyText.value" data-bind-text="emptyText.value"></p>
+        </div>
+        <div class="dmc-inv-typed" data-bind-hidden="!inviteTyped.value">
+          <p class="dmc-inv-label">Or type a name and email</p>
+          <div class="dmc-inv-pair">
+            <input class="dmc-inv-input" data-model="typedName.value" maxlength="120" autocomplete="off" placeholder="Name" aria-label="Their name">
+            <input class="dmc-inv-input" type="email" data-model="typedEmail.value" maxlength="200" autocomplete="off" placeholder="name@example.com" aria-label="Their email" data-on-keydown="typedKey">
+            <button type="button" class="dmc-btn dmc-inv-add" data-on-click="addTyped" aria-label="Add this person">${ico('plus')}</button>
+          </div>
+        </div>
+      </div>
+      <div class="dmc-inv-foot">
+        <fieldset class="dmc-inv-via" data-bind-hidden="!inviteSearch.value && !inviteTyped.value"><legend>Send them</legend>
+          <label><input type="checkbox" data-model="viaNotify.value"><span>Notification</span></label>
+          <label data-bind-hidden="!canMessage.value"><input type="checkbox" data-model="viaMessage.value"><span>Message</span></label>
+          <label><input type="checkbox" data-model="viaEmail.value"><span>Email</span></label>
+        </fieldset>
+        <p class="dmc-inv-hint" data-bind-hidden="!inviteSearch.value && !inviteTyped.value" data-bind-text="viaHint.value"></p>
+        <p class="dmc-inv-status" role="status" data-bind-hidden="!inviteNote.value" data-bind-class="inviteBad.value && 'is-err'" data-bind-text="inviteNote.value"></p>
+        <ul class="dmc-inv-results" data-each="sent key=id">
+          <li data-bind-class="cls"><span class="dmc-inv-rname" data-bind-text="name"></span><span class="dmc-inv-rtext" data-bind-text="text"></span></li>
+        </ul>
+        <input class="dmc-inv-input dmc-inv-link" readonly data-bind-hidden="!copiedLink.value" data-bind-value="copiedLink.value" aria-label="The Join link" data-on-focus="selectLink">
+        <div class="dmc-inv-btns">
+          <button type="button" class="dmc-btn dmc-btn--ghost dmc-inv-copy" data-bind-hidden="!inviteCopy.value" data-on-click="copyLink" data-bind-disabled="inviteBusy.value">${ico('copy')}<span>Copy link</span></button>
+          <button type="button" class="dmc-btn dmc-btn--go dmc-inv-send" data-bind-hidden="!inviteSearch.value && !inviteTyped.value" data-on-click="sendInvites" data-bind-disabled="!canSendInvites.value">${ico('send')}<span data-bind-text="sendLabel.value"></span></button>
+        </div>
+      </div>
+    </aside>
   </section>
 </div>`;
 
@@ -155,6 +219,8 @@ const hueOf = (key) => {
 };
 const initialOf = (n) => (String(n || '').trim()[0] || '?').toUpperCase();
 const GROUP_MS = 5 * 60e3;
+const INVITE_MAX = 10;                                   // people in one invite (the engine's MAX_TARGETS)
+const EMAIL_RE = /^[^\s@<>"]+@[^\s@<>"]+\.[^\s@<>"]+$/;
 
 function mount(el) {
     let cfg;
@@ -208,6 +274,41 @@ function mount(el) {
     const canSend = M.computed(() => /\S/.test(draft.value || ''));
     const title = M.observable(cfg.title || 'Call');
 
+    // ---- Add people (the host, when the Tool allows it: join answers canInvite) ----------------
+    const canInvite = M.observable(false);
+    // What the Tool offers this host (join's inviteOptions): search the team (+ contacts when typed), contacts and
+    // "type a name and email", Copy link. Messages: search only. Booking's host with no account on the site: Copy link only.
+    const inviteSearch = M.observable(true);
+    const inviteTyped = M.observable(true);
+    const inviteCopy = M.observable(true);
+    const inviteOpen = M.observable(false);
+    const query = M.observable('');
+    const found = M.observableArray([]);                 // search rows {key, kind, id, name, email, badge, initial, picked: observable}
+    const picked = M.observableArray([]);                // chips {key, kind, id, name, email?, badge, removeLabel}
+    const typedName = M.observable('');
+    const typedEmail = M.observable('');
+    const viaNotify = M.observable(true);
+    const viaMessage = M.observable(true);
+    const viaEmail = M.observable(true);
+    const canMessage = M.observable(false);              // a search said a direct message can reach the team
+    const inviteBusy = M.observable(false);
+    const inviteNote = M.observable('');
+    const inviteBad = M.observable(false);
+    const sent = M.observableArray([]);                  // {id, name, text, cls}
+    const copiedLink = M.observable('');
+    const searched = M.observable(false);
+    const inviteSub = M.computed(() => (!inviteSearch.value ? 'Copy a link to pass on' : inviteTyped.value ? 'Contacts, the team or any email' : 'Ring another team member'));
+    const searchHint = M.computed(() => (inviteTyped.value ? 'Search your contacts and team' : 'Search the team'));
+    const foundTitle = M.computed(() => ((query.value || '').trim() ? 'Results' : 'Your team'));
+    const emptyText = M.computed(() => (!searched.value || found.value.length ? ''
+        : (query.value || '').trim() ? `Nobody found.${inviteTyped.value ? ' Type their name and email below.' : ''}` : 'Nobody else to add.'));
+    const viaHint = M.computed(() => (inviteTyped.value
+        ? 'Notification and Message reach team members only; contacts and typed addresses get the email. Everyone knocks and you let them in.'
+        : 'They get a notification and a message in Messages with their own link; tick Email to send one too.'));
+    const canSendInvites = M.computed(() => picked.value.length > 0 && !inviteBusy.value
+        && (viaEmail.value || viaNotify.value || (viaMessage.value && canMessage.value)));
+    const sendLabel = M.computed(() => (picked.value.length > 1 ? `Invite ${picked.value.length}` : 'Invite'));
+
     // ---- The connection to the site ---------------------------------------------------
     let me = null;                                       // {id, secret, who}
     let since = 0;
@@ -337,7 +438,7 @@ function mount(el) {
     // ---- Chat -------------------------------------------------------------------------------
     // Items come from the site as {id, seq, at, kind: 'chat'|'system', from, who, name, text, event?}: the history
     // in `admitted.chat`, then one per `chat` event (and on joined/left/recording events as `item`). Each becomes a
-    // display row here, grouped the WhatsApp way against the row before it; the same id never shows twice.
+    // display row here, grouped against the row before it (a name + time line opens each group); the same id never shows twice.
     const seenIds = new Set();
     let lastRow = null;
     const scroller = () => el.querySelector('.dmc-messages');
@@ -367,7 +468,7 @@ function mount(el) {
         const day = !lastRow || dayKey(lastRow.when) !== dayKey(when) ? dayLabel(when) : '';
         const first = sys || Boolean(day) || !lastRow || lastRow.sys || lastRow.sender !== sender || when - lastRow.when > GROUP_MS;
         const row = {id: raw.id, sys, mine, text: raw.text, name: raw.name || 'Someone', day, sender, when,
-            showName: first && !mine && !sys, hue: hueOf(sender),
+            showName: first && !mine && !sys, showMeta: first && !sys, hue: hueOf(sender),
             time: when.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit', hourCycle: 'h23'}),
             cls: ['dmc-msg', sys ? 'is-sys' : mine ? 'is-mine' : 'is-other', first ? 'is-first' : 'is-cont', day ? 'has-day' : ''].join(' ').trim()};
         const stick = nearBottom() || mine || !live;
@@ -389,7 +490,7 @@ function mount(el) {
                 (e.peers || []).forEach(addPeer);
                 showSelf();
                 startClock();
-                fit();
+                layout();
                 break;
             case 'joined': addPeer(e.peer); addItem(e.item); break;
             case 'left': dropPeer(e.id); addItem(e.item); break;
@@ -437,23 +538,71 @@ function mount(el) {
         tick();
         clockTimer = setInterval(tick, 1000);
     }
-    /** The stage fills the window below whatever the site puts above it (its header): measured, not guessed. */
-    function fit() {
-        requestAnimationFrame(() => {
-            const call = el.querySelector('.dmc-call');
-            if (!call || call.hidden) return;
-            const top = call.getBoundingClientRect().top + window.scrollY;
-            el.style.setProperty('--dmc-offset', `${Math.round(Math.max(0, Math.min(top, window.innerHeight * 0.35)))}px`);
-            requestAnimationFrame(() => {
-                const r = call.getBoundingClientRect();
-                if (r.bottom > window.innerHeight + 2 || r.top < 0) call.scrollIntoView({block: 'end', behavior: 'smooth'});
-            });
-        });
+    /**
+     * The screen is a full-bleed layer (fixed) over the page below the site's header - measured, not guessed: the
+     * navbar's bottom edge (or its side, for a vertical one); without a recognisable header, where the mount point
+     * was. The page behind does not scroll.
+     */
+    let flowTop = null;
+    function layoutChrome() {
+        const root = el.firstElementChild;
+        if (!root) return;
+        if (flowTop === null) {
+            try { window.scrollTo(0, 0); } catch { /* never mind */ }
+            flowTop = el.getBoundingClientRect().top;
+            root.classList.add('dmc--app');
+            document.documentElement.classList.add('dmc-page');
+        }
+        const vw = window.innerWidth; const vh = window.innerHeight;
+        let top = flowTop; let left = 0; let right = 0;
+        const nav = [document.getElementById('site-navbar'), document.querySelector('body > header, body > nav, header[role="banner"], .site-header')]
+            .find(n => n && !el.contains(n) && n.getBoundingClientRect().height > 0);
+        if (nav) {
+            const r = nav.getBoundingClientRect();
+            const vertical = r.height > vh * 0.6 && r.width < vw * 0.5;
+            if (vertical && r.left < vw / 2) { top = 0; left = r.right; } else if (vertical) { top = 0; right = vw - r.left; } else top = r.bottom;
+        }
+        const clamp = (v, most) => `${Math.round(Math.max(0, Math.min(v, most)))}px`;
+        root.style.setProperty('--dmc-offset', clamp(top, vh * 0.35));
+        root.style.setProperty('--dmc-left', clamp(left, vw * 0.4));
+        root.style.setProperty('--dmc-right', clamp(right, vw * 0.4));
+    }
+    /**
+     * Tiles fill the stage: for this stage's size, the columns x rows (and the tile size) that show the most of
+     * everyone. A tile stretches to its cell and the video covers it (no letterbox bands); a tile may be tall
+     * (the sides of the picture are cropped - faces are central) but never wider than 2.4:1, which would crop heads.
+     * Score: tile area x sqrt(share of the 16:9 picture still visible).
+     */
+    function layoutTiles() {
+        const box = el.querySelector('.dmc-remote');
+        const n = Math.min(6, peers.value.length);
+        if (!box || !n || !box.clientWidth) return;
+        const gap = parseFloat(getComputedStyle(box).columnGap) || 8;
+        const W = box.clientWidth; const H = box.clientHeight;
+        const WIDEST = 2.4; const TALLEST = 0.5; const VIDEO = 16 / 9;
+        let best = null;
+        for (let cols = 1; cols <= n; cols++) {
+            const rows = Math.ceil(n / cols);
+            let w = (W - (cols - 1) * gap) / cols; let h = (H - (rows - 1) * gap) / rows;
+            if (w <= 0 || h <= 0) continue;
+            if (w / h > WIDEST) w = h * WIDEST;
+            if (w / h < TALLEST) h = w / TALLEST;
+            const aspect = w / h;
+            const score = w * h * Math.sqrt(Math.min(aspect / VIDEO, VIDEO / aspect));
+            if (!best || score > best.score) best = {cols, rows, w, h, score};
+        }
+        if (!best) return;
+        box.style.setProperty('--cols', String(best.cols));
+        box.style.setProperty('--rows', String(best.rows));
+        box.style.setProperty('--tile-w', `${Math.floor(best.w)}px`);
+        box.style.setProperty('--tile-h', `${Math.floor(best.h)}px`);
     }
-    window.addEventListener('resize', () => { if (stage.value === 'in') fit(); });
+    function layout() { requestAnimationFrame(() => { layoutChrome(); layoutTiles(); }); }
+    window.addEventListener('resize', layout);
 
     function finish(kind, title, text) {
         ended.value = {title, text};
+        inviteOpen.value = false;
         clearInterval(clockTimer); clockTimer = null;
         stage.value = kind;
         stopRecording();
@@ -524,6 +673,80 @@ function mount(el) {
         stage, name, initial, micOn, camOn, sharing, recording, iRecord, recordingAllowed, host, busy, error, deviceNote, sideOpen, unread,
         unreadText, draft, canSend, peers, waiting, waitingTitle, messages, newBelow, endTitle, endText, meCaption, countText, countTitle,
         clock, chatSub, aloneText,
+        canInvite, inviteSearch, inviteTyped, inviteCopy, inviteOpen, query, found, picked, typedName, typedEmail, viaNotify, viaMessage, viaEmail, canMessage,
+        inviteBusy, inviteNote, inviteBad, sent, copiedLink, inviteSub, searchHint, foundTitle, emptyText, viaHint, canSendInvites, sendLabel,
+
+        toggleInvite() {
+            inviteOpen.value = !inviteOpen.value;
+            if (!inviteOpen.value) return;
+            sideOpen.value = false;
+            if (!searched.value && inviteSearch.value) runSearch();
+            if (window.matchMedia('(min-width: 761px)').matches) setTimeout(() => el.querySelector('.dmc-inv-q')?.focus({preventScroll: true}), 250);
+        },
+        searchSoon() {
+            clearTimeout(searchTimer);
+            searchTimer = setTimeout(runSearch, 250);
+        },
+        pick(row) {
+            const at = picked.value.find(p => p.key === row.key);
+            if (at) { model.unpick(at); return; }
+            if (picked.value.length >= INVITE_MAX) { note(`Add at most ${INVITE_MAX} people at a time.`, true); return; }
+            picked.push({key: row.key, kind: row.kind, id: row.id, name: row.name, badge: row.badge, removeLabel: `Remove ${row.name}`});
+            row.picked.value = true;
+        },
+        unpick(chip) {
+            picked.remove(chip);
+            const row = found.value.find(r => r.key === chip.key);
+            if (row) row.picked.value = false;
+        },
+        addTyped() {
+            const email = String(typedEmail.value || '').trim().toLowerCase();
+            if (!EMAIL_RE.test(email)) { note('That email address does not look right.', true); return; }
+            const name = String(typedName.value || '').trim().slice(0, 120) || email.split('@')[0];
+            const key = `email:${email}`;
+            if (!picked.value.some(p => p.key === key)) {
+                if (picked.value.length >= INVITE_MAX) { note(`Add at most ${INVITE_MAX} people at a time.`, true); return; }
+                picked.push({key, kind: 'email', name, email, badge: 'Email', removeLabel: `Remove ${name}`});
+            }
+            typedName.value = ''; typedEmail.value = ''; note('');
+        },
+        typedKey(e) { if (e.key === 'Enter' && !e.isComposing) { e.preventDefault(); model.addTyped(); } },
+        selectLink(e) { try { e.target.select(); } catch { /* never mind */ } },
+
+        async sendInvites() {
+            if (!canSendInvites.value || !me) return;
+            inviteBusy.value = true; note('');
+            const people = picked.value.map(p => (p.kind === 'email' ? {name: p.name, email: p.email} : {kind: p.kind, id: p.id}));
+            try {
+                const r = await post('invite', {people, via: {email: viaEmail.value, notify: viaNotify.value, message: viaMessage.value && canMessage.value}});
+                const body = await r.json().catch(() => ({}));
+                if (!r.ok) { note(body.error || 'The invitations could not be sent.', true); return; }
+                const results = Array.isArray(body.results) ? body.results : [];
+                sent.value = results.map((x, i) => ({id: `${Date.now()}-${i}`, name: x.name, text: resultText(x),
+                    cls: `dmc-inv-res ${x.emailed || x.notified || x.messaged ? 'is-ok' : 'is-err'}`}));
+                for (const p of [...picked.value]) model.unpick(p);
+                const reached = results.filter(x => x.emailed || x.notified || x.messaged).length;
+                note(reached ? (inviteTyped.value ? 'Sent. They will knock - let them in from the waiting list.' : 'Sent. They join as soon as they open their link.')
+                    : 'Nobody could be reached - see below.', !reached);
+            } catch {
+                note('Could not reach the site. Check your connection and try again.', true);
+            } finally { inviteBusy.value = false; }
+        },
+        async copyLink() {
+            if (!me) return;
+            inviteBusy.value = true; note('');
+            try {
+                const r = await post('invite', {people: [], via: {}});
+                const body = await r.json().catch(() => ({}));
+                if (!r.ok || !body.link) { note(body.error || 'No link could be made.', true); return; }
+                copiedLink.value = body.link;
+                let copied = false;
+                try { await navigator.clipboard.writeText(body.link); copied = true; } catch { copied = false; }
+                note(copied ? 'Link copied. Whoever opens it knocks, and you let them in.' : 'Copy the link below. Whoever opens it knocks, and you let them in.');
+            } catch {
+                note('Could not reach the site. Check your connection and try again.', true);
+            } finally { inviteBusy.value = false; }
+        },
 
         toggleMic() { micOn.value = !micOn.value; setTracks(); },
         toggleCam() {
@@ -533,6 +756,7 @@ function mount(el) {
         toggleSide() {
             sideOpen.value = !sideOpen.value;
             if (!sideOpen.value) return;
+            inviteOpen.value = false;
             unread.value = 0;
             toBottom(false);
             // Not on a phone: the keyboard would cover the messages the moment the sheet opens.
@@ -556,6 +780,12 @@ function mount(el) {
                 max.value = body.max || 6;
                 recordingAllowed.value = body.recordingAllowed === true;
                 if (body.title) title.value = body.title;
+                canInvite.value = body.canInvite === true;
+                const offer = body.inviteOptions || {};
+                inviteSearch.value = offer.search !== false;
+                inviteTyped.value = typeof offer.typed === 'boolean' ? offer.typed : offer.external !== false;
+                inviteCopy.value = typeof offer.copyLink === 'boolean' ? offer.copyLink : offer.external !== false;
+                if (!inviteTyped.value) viaEmail.value = false;
                 stage.value = body.state === 'in' ? 'in' : 'waiting';
                 since = 0;
                 pollLoop();
@@ -636,16 +866,50 @@ function mount(el) {
     };
 
     el.innerHTML = TEMPLATE;
+    let searchTimer = null;
+    let searchSeq = 0;
+    function note(text, bad = false) { inviteNote.value = text; inviteBad.value = Boolean(bad && text); }
+    /** The people the Tool offers for this search (the team for an empty one). Late answers are dropped. */
+    async function runSearch() {
+        if (!me || !canInvite.value || !inviteSearch.value) return;
+        const mine = ++searchSeq;
+        const q = String(query.value || '').trim();
+        try {
+            const r = await fetch(`${url('people')}?q=${encodeURIComponent(q)}`, {headers: headers(), cache: 'no-store'});
+            const body = await r.json().catch(() => ({}));
+            if (mine !== searchSeq) return;
+            if (!r.ok) { note(body.error || 'Could not search just now.', true); return; }
+            const chosen = new Set(picked.value.map(p => p.key));
+            const rows = (Array.isArray(body.people) ? body.people : []).map(p => ({key: `${p.kind}:${p.id}`, kind: p.kind, id: p.id, name: p.name,
+                email: p.email || '', badge: p.kind === 'user' ? 'Team' : 'Contact', initial: initialOf(p.name), canMessage: p.canMessage === true,
+                picked: M.observable(chosen.has(`${p.kind}:${p.id}`))}));
+            if (rows.some(x => x.kind === 'user' && x.canMessage)) canMessage.value = true;
+            found.value = rows;
+            searched.value = true;
+        } catch {
+            if (mine === searchSeq) note('Could not reach the site. Check your connection and try again.', true);
+        }
+    }
+    const resultText = (x) => {
+        const did = [x.notified && 'notified', x.messaged && 'messaged', x.emailed && 'emailed'].filter(Boolean);
+        const said = did.length ? `${did.slice(0, -1).join(', ')}${did.length > 1 ? ' and ' : ''}${did.at(-1)}` : '';
+        const text = said ? said[0].toUpperCase() + said.slice(1) : '';
+        return [text, x.error || ''].filter(Boolean).join(' - ') || 'Invited';
+    };
+
     const handleBindings = M.applyBindings(model, el.firstElementChild);
     // Icons after binding (I.scan swaps each span for an SVG); new waiting rows get theirs as they arrive.
     const scan = () => { try { window.I?.scan?.(el); } catch { /* no icons: the labels still read */ } };
+    layout();
+    const stopLayout = M.effect(() => { peers.value; requestAnimationFrame(layoutTiles); });
+    if (typeof ResizeObserver === 'function') { const box = el.querySelector('.dmc-remote'); if (box) new ResizeObserver(() => layoutTiles()).observe(box); }
     scan();
-    const stopScan = M.effect(() => { waiting.value; requestAnimationFrame(scan); });
+    const stopScan = M.effect(() => { waiting.value; found.value; picked.value; requestAnimationFrame(scan); });
     // Reading scrolled back up: the "new messages" chip goes once they are at the bottom again.
     el.querySelector('.dmc-messages')?.addEventListener('scroll', () => { if (newBelow.value && nearBottom()) newBelow.value = false; }, {passive: true});
     window.addEventListener('pagehide', () => { if (me) post('leave', {}, {keepalive: true}); });
     getDevices().then(setTracks);
-    return () => { stopAttach?.(); stopScan?.(); stopTiles?.(); clearInterval(clockTimer); handleBindings?.dispose?.(); };
+    return () => { stopLayout?.(); stopAttach?.(); stopScan?.(); stopTiles?.(); clearInterval(clockTimer); handleBindings?.dispose?.(); };
 }
 
 document.querySelectorAll('[data-dm-call]').forEach(mount);

package/plugins/booking/CLAUDE.md

@@ -20,6 +20,22 @@ service - no import of the Calendar, which is a separate paid Tool).
 Booking Pro (not yet built) is an ADD-ON that registers into this one (`lib/extensions.js`), the Cart / Cart Pro
 pattern - it does not supersede it. Payment is Pro only.
 
+1.6.0 (2026-09-30): "Add people" in an online booking's call (core with `server/services/callInvites.js` and
+`_lib/call/invite.js`; both imported dynamically - lib/call.js by top-level `await import`, plugin.js beside
+`mountCallRoutes` - so an older core simply has no button). The HOST (the person's host link) searches the contacts
+of the person's linked ACTIVE account (`hostUserOf`) and the team, and invites contacts, team members or any name +
+email. With NO linked account the host link may be held by an outsider (it goes to the person's email address and
+the .ics), so resolve answers `inviteOptions: {search: false, typed: false, copyLink: true}` - Copy link only: no
+directory, no contacts, nothing sent (the engine and `send` both refuse people). Links use core's `inviteOrigin`
+(`site.baseUrl` first).
+Each invitee gets their OWN pass `?b=<booking>&g=<nonce>.<hmac>` signed with the session's `callExtraKey` - made on the
+first invite and written to EVERY booking of the session (`changeBooking` patch, online only, never replaced; the
+stored key is re-read after writing, so two sends at once agree), never the customer's token or the host key (a
+customer token carries their name and identity: an invitee would replace them). `whoIsCalling` answers `{host: false,
+name: '', identity: '<session>:inv:<nonce>', invited: true}` for a pass; the page asks their name; they knock. Core
+sends (Join email, a notification + a DM from the person's user for team members). `adminBooking` strips
+`callExtraKey`. Tests: tests/api.test.js "1.6 Add people" (a linked host; a host with no account).
+
 1.5.0 (2026-09-30): the call's chat is saved per SESSION (`sessionOf` - a class's shared call has one chat) in
 `data/call-chat.json` (`options.dataDir` in tests) through core's `_lib/call/chatStore.js` (dynamic import beside
 `mountCallRoutes`; an older core has none and nothing changes), passed as the engine's `chat` - so the call reopened
@@ -110,7 +126,8 @@ all off - bookings hold customers' details). Settings: `config/plugins.json` `bo
 A booking: `serviceId`, `serviceName`, `duration`, `bookableId`, `bookableName`, `startAt`, `endAt`, `blockStart`,
 `blockEnd`, `status`, `name`, `email`, `phone`, `notes`, `staffNote`, `contactId`, `source` (public | admin),
 `createdBy`, `token` (the customer's link; never sent to the admin), `reminderSentAt`, `history` [{at, what, by,
-from?, reason?}], `cancelledAt`, `ext` (Pro's); online ones also `online`, `hostKey`, `recordingAllowed`, `callOpenedAt`. Services and bookables carry `ext` too (Pro's fields, kept by the
+from?, reason?}], `cancelledAt`, `ext` (Pro's); online ones also `online`, `hostKey`, `recordingAllowed`, `callOpenedAt`, `callExtraKey` (1.6, the session's key for
+Add people passes; never sent to the admin). Services and bookables carry `ext` too (Pro's fields, kept by the
 free Tool untouched).
 
 ## Extensions (Booking Pro)

package/plugins/booking/docs/guide.md

@@ -58,6 +58,7 @@ Booking has its own permission, **Booking**, which admins have by default. **See
 
 Booking Pro adds the following to the free Tool:
 - Online appointments, held as a video call on your site. What is typed in the call's chat is kept: open the booking and click **Call chat** to read it afterwards (a class shares one chat).
+- **Add people** during an online call: the person being booked clicks **Add people** in the call, searches their contacts and the team (or types a name and email), and sends each person their own Join link - by email, and for team members also as a notification and a message in Messages. They knock and you let them in. **Copy link** gives you a link to pass on yourself. This needs the person to be linked to their account on the site (**People & rooms**); without one, their call offers **Copy link** only.
 - **Call now**: open an online booking's call early, or start a video call with anyone straight away - from Booking, a contact or an email.
 - Services that need more than one person or room at once.
 - Classes and group sessions with places and a waiting list.

package/plugins/booking/lib/call.js

@@ -6,7 +6,10 @@
  * same service, start and person - so everyone booked into an online class
  * shares one call, and a one-to-one appointment is a session of one. Links
  * name the session and the booking: `?b=<booking>&t=<customer token>` for the
- * customer, `&h=<host key>` for the person they booked. Booking (free) serves
+ * customer, `&h=<host key>` for the person they booked, `&g=<invite pass>` for
+ * someone the host added while the call runs ("Add people", 1.6: a pass under
+ * the session's `callExtraKey` - never the customer's token or the host key -
+ * who names themselves and knocks). Booking (free) serves
  * these for any booking that is already online, so a lapsed Pro licence
  * strands nobody; only Pro can make a service online in the first place.
  *
@@ -15,6 +18,12 @@
 
 import {createHash, timingSafeEqual} from 'crypto';
 
+// Add people (1.6) needs a core with _lib/call/invite.js; an older one has no invite passes.
+let invite = null;
+try { invite = await import('../../_lib/call/invite.js'); } catch { invite = null; }
+/** Does this core have "Add people"? */
+export const invitesAvailable = () => Boolean(invite);
+
 export const OPENS_BEFORE_MIN = 10;
 export const CLOSES_AFTER_MIN = 60;
 const HOLDING = new Set(['pending', 'confirmed', 'completed', 'no-show']);
@@ -33,6 +42,10 @@ export const joinPath = (settings, b) => `${settings.bookingPath}/call/${session
 /** The host's (the person booked) - never shown to the customer. */
 export const hostPath = (settings, b) => `${settings.bookingPath}/call/${sessionOf(b)}?b=${encodeURIComponent(b.id)}&h=${encodeURIComponent(b.hostKey)}`;
 
+/** A Join link for someone added to the call (1.6): a new pass under the session's extra key. */
+export const invitePath = (settings, b, key) => (invite && key
+    ? `${settings.bookingPath}/call/${sessionOf(b)}?b=${encodeURIComponent(b.id)}&g=${encodeURIComponent(invite.invitePass(key, sessionOf(b)))}` : '');
+
 /** How long a call opened early ("Call now", Booking 1.4) stays open at least. */
 export const OPENED_EARLY_HOURS = 2;
 
@@ -60,7 +73,7 @@ export function callWindow(b, now = Date.now()) {
  *
  * @param {object|null} b - the booking named by `cred.b`
  * @param {string} room - the room in the address
- * @param {{t?: string, h?: string}} cred
+ * @param {{t?: string, h?: string, g?: string}} cred
  */
 export function whoIsCalling(b, room, cred = {}, now = Date.now()) {
     if (!b || b.online !== true || !HOLDING.has(b.status) || sessionOf(b) !== room) return null;
@@ -68,5 +81,8 @@ export function whoIsCalling(b, room, cred = {}, now = Date.now()) {
     // identity: a link the host turns away cannot knock again (the engine remembers it per room).
     if (cred.h && same(cred.h, b.hostKey)) return {...base, host: true, name: b.bookableName || 'Host', identity: `${b.id}:host`};
     if (cred.t && same(cred.t, b.token)) return {...base, host: false, name: b.name || 'Guest', identity: `${b.id}:guest`};
+    // Someone the host added (1.6): their own pass, their own name, and they knock.
+    const nonce = cred.g && b.callExtraKey && invite ? invite.checkInvitePass(b.callExtraKey, room, cred.g) : null;
+    if (nonce) return {...base, host: false, name: '', identity: `${room}:inv:${nonce}`, invited: true};
     return null;
 }

package/plugins/booking/lib/store.js

@@ -313,6 +313,8 @@ export function changeBooking(id, patch, by = '') {
             data.callOpenedAt = String(patch.callOpenedAt || '');
             if (data.callOpenedAt) data.history = [...(data.history || []), {at: data.callOpenedAt, what: 'call-opened', by}].slice(-50);
         }
+        // "Add people" (1.6): the session's key for invite passes - set once, never replaced.
+        if (patch.callExtraKey !== undefined && data.online === true && !data.callExtraKey) data.callExtraKey = String(patch.callExtraKey || '').slice(0, 64);
         if (patch.ext && typeof patch.ext === 'object') data.ext = {...(data.ext || {}), ...patch.ext};
         return {booking: flat(await updateEntry(BOOKINGS, id, data)), from};
     });