contour-deck 0.2.1 → 0.2.2

package/dist/remote/labels.d.ts

@@ -6,6 +6,8 @@ export interface RemoteLabels {
     remoteQr: string;
     remoteHint: string;
     notesQr: string;
+    /** Names the switch between the two QR codes. */
+    qrMode: string;
     notesHint: string;
     noRelay: string;
     relayConnecting: string;

package/dist/remote/labels.js

@@ -4,6 +4,7 @@ export const defaultRemoteLabels = {
     remoteQr: "手機遙控",
     remoteHint: "掃描後手機會顯示確認碼，在這裡按允許才能控制。",
     notesQr: "講稿",
+    qrMode: "QR 碼用途",
     notesHint: "手機自己翻頁的講稿，不需要連線。",
     noRelay: "這個頁面沒有設定中繼服務，手機無法遙控；講稿與講者視窗仍可使用。",
     relayConnecting: "中繼連線中",

package/dist/remote/panel.js

@@ -23,9 +23,13 @@ export function createPanel(options) {
     /** Requests and the paired phone: the part that changes. */
     const live = el.appendChild(h("div", "ct-rp-live", "", { "aria-live": "polite" }));
     live.style.display = "contents";
+    // One QR at a time: the phone remote or the notes, chosen with a switch above it.
+    const modes = el.appendChild(h("div", "ct-rp-modes", "", { role: "group", "aria-label": labels.qrMode }));
     const codes = el.appendChild(h("div", "ct-rp-qrs"));
-    function tile(title, hint, link) {
-        const figure = codes.appendChild(h("figure", "ct-rp-qr"));
+    const tiles = {};
+    function tile(mode, title, hint, link) {
+        const figure = codes.appendChild(h("figure", "ct-rp-qr", "", { "data-ct-qr": mode }));
+        tiles[mode] = { figure, switch: modes.appendChild(button(`qr:${mode}`, title)) };
         const image = h("div", "ct-rp-img");
         image.hidden = true;
         figure.append(image, h("h3", "", title), h("p", "", hint), h("a", "ct-rp-url", link, { href: link, target: "_blank", rel: "noopener" }));
@@ -41,10 +45,19 @@ export function createPanel(options) {
             .catch(() => { });
     }
     if (options.remoteLink)
-        tile(labels.remoteQr, labels.remoteHint, options.remoteLink);
+        tile("remote", labels.remoteQr, labels.remoteHint, options.remoteLink);
     else
         codes.before(h("p", "", labels.noRelay));
-    tile(labels.notesQr, labels.notesHint, options.notesLink);
+    tile("notes", labels.notesQr, labels.notesHint, options.notesLink);
+    // Without a relay there is only the notes QR, and nothing to switch.
+    modes.hidden = Object.keys(tiles).length < 2;
+    function showQr(mode) {
+        for (const [name, { figure, switch: control }] of Object.entries(tiles)) {
+            figure.hidden = name !== mode;
+            control.setAttribute("aria-pressed", String(name === mode));
+        }
+    }
+    showQr(options.remoteLink ? "remote" : "notes");
     const tools = el.appendChild(h("div", "ct-rp-row"));
     const time = h("b", "ct-rp-time", "0:00");
     const timer = h("span", "ct-rp-row");
@@ -63,6 +76,9 @@ export function createPanel(options) {
     };
     el.addEventListener("click", event => {
         const control = event.target.closest("[data-ct-rp]");
+        const action = control?.dataset.ctRp ?? "";
+        if (action.startsWith("qr:"))
+            return showQr(action.slice(3));
         if (control)
             actions[control.dataset.ctRp ?? ""]?.(control.dataset.ctId ?? "");
     });

package/dist/remote/style.js

@@ -26,8 +26,10 @@ const css = `
 .ct-rp-code { font: 800 1.9rem/1 var(--ct-mono); letter-spacing: .14em; margin-right: auto; }
 .ct-rp-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
 .ct-rp-row > :last-child { margin-left: auto; }
-.ct-rp-qrs { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
-.ct-rp-qr { margin: 0; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
+.ct-rp-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
+.ct-rp-modes[hidden], .ct-rp-qr[hidden] { display: none; }
+.ct-rp-qrs { display: grid; justify-items: center; }
+.ct-rp-qr { margin: 0; display: flex; flex-direction: column; gap: .35rem; min-width: 0; width: min(100%, 15rem); }
 .ct-rp-img { aspect-ratio: 1; background: #fff; border: 1px solid var(--ct-border); }
 .ct-rp-img svg { display: block; width: 100%; height: 100%; }
 .ct-rp-url { font: .62rem/1.35 var(--ct-mono); color: var(--ct-muted); overflow-wrap: anywhere; }
@@ -40,6 +42,8 @@ const css = `
 .ct-pv { position: relative; overflow: hidden; aspect-ratio: var(--ct-ratio, 16 / 9); background: var(--ct-bg); border: 1px solid var(--ct-border); }
 .ct-app .ct-pv > .ct-stage { inset: auto; left: 0; top: 0; width: 1280px; height: calc(1280px / var(--ct-ratio, 16 / 9)); transform: scale(var(--ct-k, .25)); transform-origin: 0 0; border: 0; z-index: 0; visibility: visible; pointer-events: none; }
 .ct-pvw { height: 100%; overflow: hidden; }
+/* The copy shows the page as it stands, revealed: a host's entrance motion would hold it at its first frame (often transparent), since the copy is never the current page. */
+.ct-pv.ct-pv > .ct-stage *, .ct-pv.ct-pv > .ct-stage *::before, .ct-pv.ct-pv > .ct-stage *::after { animation: none !important; transition: none !important; }
 
 /* ---- the phone ---- */
 .ct-app.ct-rmt { display: flex; flex-direction: column; grid-template-rows: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); font-size: 1rem; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contour-deck",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Outline-first slide decks on real DOM: blocks, slides, pages.",
   "keywords": [
     "slides",