@whooshbang/sdk 5.1.0 → 6.0.0

package/dist/recipient/element.js

@@ -3,7 +3,12 @@ import { WhooshBangRecipientSessionClient } from "../client.js";
 import { WhooshBangProblemError } from "../errors.js";
 import { recipientPanelCopy, resolveRecipientPanelCopy, } from "./i18n/catalog.js";
 import { createOpenerNonce, isExpectedHandoffCompletion, launchHandoff, WHOOSHBANG_HOSTED_ORIGIN, } from "./handoff.js";
-import { recipientView, } from "./view.js";
+import { whooshbangMark } from "./platform-mark.js";
+import { ORDER_SECTION_STYLES, orderPreviewText, renderOrderSection, } from "./order-section.js";
+import { addStep, draftChanged, moveStep, refreshDraft, removeStep, saveRequest, setWait, startDraft, stepKey, } from "./order-view.js";
+import { QUIET_SECTION_STYLES, renderQuietSection } from "./quiet-section.js";
+import { addQuietWindow, browserTimeZone, QUIET_CHANNELS, quietChanged, quietDraftErrors, quietEdited, quietErrorControl, quietProblemErrors, quietSaveRequest, removeQuietWindow, setQuietWindow, startQuietDraft, toggleQuietDay, } from "./quiet-view.js";
+import { channelLabel, recipientView, } from "./view.js";
 export const RECIPIENT_SETTINGS_ELEMENT = "whooshbang-recipient-settings";
 /**
  * How long the component keeps asking after a handoff opens.
@@ -125,12 +130,44 @@ a.fallback { color: inherit; }
   padding-top: .75rem;
   text-align: end;
 }
-.platform-brand a { color: inherit; opacity: .78; text-decoration: none; }
+.platform-brand a {
+  align-items: center;
+  color: inherit;
+  display: inline-flex;
+  gap: .35rem;
+  opacity: .78;
+  text-decoration: none;
+}
+.platform-brand .platform-mark { flex: 0 0 auto; }
 .platform-brand a:hover { opacity: 1; text-decoration: underline; }
+.tabs {
+  border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
+  display: flex;
+  gap: .25rem;
+  margin: .25rem 0 1rem;
+}
+.tabs button.tab {
+  background: transparent;
+  border-bottom: 2px solid transparent;
+  border-radius: 0;
+  color: inherit;
+  flex: 1 1 auto;
+  margin-bottom: -1px;
+  min-height: 2.75rem;
+  opacity: .75;
+  padding: .5rem .5rem;
+}
+.tabs button.tab[aria-selected="true"] {
+  border-bottom-color: var(--whooshbang-accent, ${RECIPIENT_BRAND_DEFAULT_ACCENT_COLOR});
+  font-weight: 600;
+  opacity: 1;
+}
+[role="tabpanel"][hidden] { display: none; }
 @media (max-width: 30rem) {
   li { align-items: flex-start; flex-direction: column; }
 }
-`;
+${ORDER_SECTION_STYLES}
+${QUIET_SECTION_STYLES}`;
 function statusText(channel, copy) {
     if (channel.paused) {
         return copy.paused;
@@ -185,10 +222,40 @@ export class WhooshBangRecipientSettingsElement extends HTMLElement {
     #sessionInput = null;
     #view;
     #visibilityListener = null;
+    /**
+     * The recipient's own escalation order, by tier (FXO-3672). Null until it
+     * loads, or when the service does not offer it, and then the section is
+     * simply absent.
+     */
+    #orders = null;
+    #orderLevel = "critical";
+    /** An unsaved edit; it belongs to one tier and survives refreshes. */
+    #orderDraft = null;
+    /** The section's own status line, kept for the element's life like `#live`. */
+    #orderStatus;
+    /** Where focus goes after an order action that removes its own control. */
+    #orderFocus = null;
+    /**
+     * The recipient's quiet hours (FXO-2103). Null until they load, or when the
+     * service does not offer them, and then the tab is simply absent.
+     */
+    #quiet = null;
+    /** An unsaved edit; it survives refreshes. */
+    #quietDraft = null;
+    /** What the last save attempt refused, by field. */
+    #quietErrors = {};
+    /** The tab's own status line, kept for the element's life like `#live`. */
+    #quietStatus;
+    /** The zone times are shown in when the service knows none. */
+    #browserZone = browserTimeZone();
+    /** The panel tab on show; kept across refreshes and polls. */
+    #tab = "channels";
     constructor() {
         super();
         this.#root = this.attachShadow({ mode: "open" });
         this.#live = document.createElement("p");
+        this.#orderStatus = document.createElement("p");
+        this.#quietStatus = document.createElement("p");
         this.#view = recipientView({ session: null, state: "loading" });
     }
     get session() {
@@ -210,6 +277,13 @@ export class WhooshBangRecipientSettingsElement extends HTMLElement {
         this.#categories = [];
         this.#armedUnsubscribe = null;
         this.#connecting = null;
+        this.#orders = null;
+        this.#orderDraft = null;
+        this.#orderStatus.textContent = "";
+        this.#quiet = null;
+        this.#quietDraft = null;
+        this.#quietErrors = {};
+        this.#quietStatus.textContent = "";
         if (!value) {
             this.#releaseLogo();
             this.#client = null;
@@ -437,22 +511,37 @@ export class WhooshBangRecipientSettingsElement extends HTMLElement {
         }
         const generation = this.#generation;
         try {
-            const [session, categoryPreferences] = await Promise.all([
+            const [session, categoryPreferences, orders, quiet] = await Promise.all([
                 client.getSession({ timeoutMs: REQUEST_TIMEOUT_MS }),
                 client
                     .getCategoryPreferences({ timeoutMs: REQUEST_TIMEOUT_MS })
                     .catch(() => null),
+                // A service without personal orders leaves the section out.
+                client
+                    .getEscalationOrders({ timeoutMs: REQUEST_TIMEOUT_MS })
+                    .catch(() => null),
+                // A service without quiet hours leaves the tab out.
+                client
+                    .getQuietHours({ timeoutMs: REQUEST_TIMEOUT_MS })
+                    .catch(() => null),
             ]);
             if (generation !== this.#generation) {
                 return;
             }
             this.#session = session;
+            // A failed read keeps what was shown; the next refresh tries again.
+            this.#orders = orders?.items ?? this.#orders;
+            this.#quiet = quiet ?? this.#quiet;
+            const refreshed = this.#currentOrder();
+            if (this.#orderDraft && refreshed?.level === this.#orderDraft.level)
+                this.#orderDraft = refreshDraft(this.#orderDraft, refreshed);
             this.#categories = (categoryPreferences?.items ?? []).map((category) => ({
                 key: category.key,
                 name: category.name,
                 ...(category.description ? { description: category.description } : {}),
                 enabled: category.can_turn_off ? category.enabled : true,
                 canTurnOff: category.can_turn_off,
+                level: category.level,
             }));
             this.#render(recipientView({
                 categories: this.#categories,
@@ -659,6 +748,13 @@ export class WhooshBangRecipientSettingsElement extends HTMLElement {
                 timeoutMs: REQUEST_TIMEOUT_MS,
             });
             this.#session = session;
+            // Whether the quiet-hours channel can be used follows its binding: a
+            // pause or resume changes the warning the Quiet hours tab shows.
+            const quiet = await client
+                .getQuietHours({ timeoutMs: REQUEST_TIMEOUT_MS })
+                .catch(() => null);
+            if (quiet !== null)
+                this.#quiet = quiet;
             this.#notice = null;
             this.#render(recipientView({
                 categories: this.#categories,
@@ -722,6 +818,494 @@ export class WhooshBangRecipientSettingsElement extends HTMLElement {
             this.#renderFailure(error);
         }
     }
+    #currentOrder() {
+        return this.#orders?.find((order) => order.level === this.#orderLevel);
+    }
+    #draftFor(order) {
+        return this.#orderDraft?.level === order.level
+            ? this.#orderDraft
+            : startDraft(order);
+    }
+    #pickOrderLevel(level) {
+        // A tier change drops an unsaved edit, exactly as the canvas does.
+        this.#orderLevel = level;
+        this.#orderDraft = null;
+        this.#orderStatus.textContent = "";
+        this.#render(this.#view);
+    }
+    /**
+     * Applies one edit. `focus` names the control that should hold focus
+     * afterwards, for edits that move or remove the one that was pressed.
+     */
+    #editOrder(change, options = {}) {
+        const order = this.#currentOrder();
+        if (!order || this.#pending)
+            return;
+        const before = draftChanged(this.#orderDraft, order);
+        this.#orderDraft = change(this.#draftFor(order));
+        this.#orderStatus.textContent = "";
+        if (options.focus !== undefined)
+            this.#orderFocus = options.focus;
+        if (options.render !== false ||
+            before !== draftChanged(this.#orderDraft, order)) {
+            this.#render(this.#view);
+            return;
+        }
+        // Typing a wait updates the preview in place, keeping the box it is in.
+        const preview = this.#root.querySelector(".order .preview-text");
+        if (preview)
+            preview.textContent = orderPreviewText({
+                channelName: (channel) => channelLabel(channel, this.#view.locale),
+                copy: this.#copy,
+                draft: this.#orderDraft,
+                order,
+            });
+    }
+    #replaceOrder(order) {
+        this.#orders = (this.#orders ?? []).map((current) => current.level === order.level ? order : current);
+    }
+    async #reloadOrders() {
+        const client = this.#client;
+        if (!client)
+            return;
+        const generation = this.#generation;
+        try {
+            const orders = await client.getEscalationOrders({
+                timeoutMs: REQUEST_TIMEOUT_MS,
+            });
+            if (generation === this.#generation)
+                this.#orders = orders.items;
+        }
+        catch {
+            // The section keeps what it showed; the status line says what failed.
+        }
+    }
+    async #orderFailure(error) {
+        const code = error instanceof WhooshBangProblemError ? error.problem.code : null;
+        if (code === "recipient_capability_invalid" ||
+            code === "resource_expired") {
+            this.#renderFailure(error);
+            return;
+        }
+        this.#emit("error", { ...(code ? { code } : {}), recoverable: true });
+        if (code === "escalation_order_conflict" ||
+            code === "escalation_order_step_ineligible") {
+            // The tier changed under the edit: show what is true now, and keep
+            // nothing that was made against the old version.
+            const generation = this.#generation;
+            await this.#reloadOrders();
+            if (generation !== this.#generation)
+                return;
+            this.#orderDraft = null;
+            this.#orderStatus.textContent =
+                code === "escalation_order_conflict"
+                    ? this.#copy.orderConflict
+                    : this.#copy.orderSaveFailed;
+            return;
+        }
+        // Anything else keeps the edit, so trying again costs nothing.
+        this.#orderStatus.textContent = this.#copy.orderSaveFailed;
+    }
+    async #saveOrder() {
+        const client = this.#client;
+        const order = this.#currentOrder();
+        const draft = this.#orderDraft;
+        if (!client || !order || !draft || draft.level !== order.level)
+            return;
+        if (this.#pending)
+            return;
+        await this.#writeOrder(() => client.saveEscalationOrder(order.level, saveRequest(draft, order), {
+            timeoutMs: REQUEST_TIMEOUT_MS,
+        }), "order:reset");
+    }
+    async #resetOrder() {
+        const client = this.#client;
+        const order = this.#currentOrder();
+        if (!client || !order || this.#pending)
+            return;
+        await this.#writeOrder(() => client.resetEscalationOrder(order.level, {
+            timeoutMs: REQUEST_TIMEOUT_MS,
+        }), `order:level:${order.level}`);
+    }
+    async #writeOrder(write, focusAfter) {
+        const generation = this.#generation;
+        this.#pending = true;
+        this.#orderFocus = focusAfter;
+        this.#render(this.#view);
+        try {
+            const written = await write();
+            if (generation !== this.#generation)
+                return;
+            this.#replaceOrder(written);
+            this.#orderDraft = null;
+            this.#orderStatus.textContent = this.#copy.orderSaved;
+            this.#emit("escalation-order-changed", {
+                level: written.level,
+                source: written.source,
+            });
+        }
+        catch (error) {
+            if (generation !== this.#generation)
+                return;
+            await this.#orderFailure(error);
+        }
+        finally {
+            // Always released: a session replaced mid-save must not leave every
+            // control in the new one refusing to act.
+            this.#pending = false;
+            if (generation === this.#generation) {
+                if (this.#view.state !== "expired") {
+                    this.#orderFocus ??= focusAfter;
+                    this.#render(this.#view);
+                }
+            }
+        }
+    }
+    #orderSection(view) {
+        const order = this.#currentOrder();
+        if (!order ||
+            (view.state !== "ready" && view.state !== "handoff") ||
+            view.channels.length === 0)
+            return null;
+        const draft = this.#draftFor(order);
+        const copy = this.#copy;
+        this.#orderStatus.className = "order-status";
+        this.#orderStatus.setAttribute("role", "status");
+        this.#orderStatus.setAttribute("aria-live", "polite");
+        return renderOrderSection({
+            canReconnect: (channel) => view.channels.some((candidate) => candidate.channel === channel &&
+                !candidate.connected &&
+                !candidate.paused) && this.#connecting === null,
+            changed: draftChanged(this.#orderDraft, order),
+            channelName: (channel) => channelLabel(channel, view.locale),
+            copy,
+            disabled: this.#pending,
+            draft,
+            locale: view.locale,
+            on: {
+                add: (candidate) => {
+                    this.#editOrder((current) => addStep(current, candidate), {
+                        focus: `order:remove:${candidate.bindingId}`,
+                    });
+                },
+                discard: () => {
+                    this.#orderDraft = null;
+                    this.#orderFocus = `order:level:${order.level}`;
+                    this.#render(this.#view);
+                },
+                move: (from, to) => {
+                    const moving = draft.steps[from];
+                    if (!moving || to < 0 || to >= draft.steps.length)
+                        return;
+                    const pressed = to < from ? "up" : "down";
+                    this.#editOrder((current) => moveStep(current, from, to), {
+                        focus: `order:${pressed}:${stepKey(moving, to)}`,
+                    });
+                },
+                pickLevel: (level) => {
+                    this.#pickOrderLevel(level);
+                },
+                reconnect: (channel) => {
+                    void this.#connect(channel);
+                },
+                remove: (index) => {
+                    const removed = draft.steps[index];
+                    const next = draft.steps[index + 1] ?? draft.steps[index - 1];
+                    this.#editOrder((current) => removeStep(current, index), {
+                        focus: removed?.bindingId !== undefined && !removed.unavailable
+                            ? `order:add:${removed.bindingId}`
+                            : next
+                                ? `order:remove:${stepKey(next, index < draft.steps.length - 1 ? index : index - 1)}`
+                                : `order:level:${order.level}`,
+                    });
+                },
+                reset: () => {
+                    void this.#resetOrder();
+                },
+                save: () => {
+                    void this.#saveOrder();
+                },
+                setWait: (index, typed, commit) => {
+                    this.#editOrder((current) => setWait(current, index, typed), {
+                        render: commit,
+                    });
+                },
+            },
+            order,
+            status: this.#orderStatus,
+            usedFor: view.categories
+                .filter((category) => category.level === order.level && category.enabled)
+                .map((category) => category.name),
+        });
+    }
+    #quietShown(quiet) {
+        return this.#quietDraft ?? startQuietDraft(quiet, this.#browserZone);
+    }
+    /**
+     * Applies one quiet-hours edit. Typing a time does not rebuild the tab, so
+     * the box keeps its caret; only Save and Discard learn whether there is
+     * now something to save.
+     */
+    #editQuiet(change, options = {}) {
+        const quiet = this.#quiet;
+        if (!quiet || this.#pending)
+            return;
+        this.#quietDraft = change(this.#quietShown(quiet));
+        this.#quietStatus.textContent = "";
+        if (options.focus !== undefined)
+            this.#orderFocus = options.focus;
+        if (options.render !== false) {
+            this.#render(this.#view);
+            return;
+        }
+        const save = this.#root.querySelector('[data-action="quiet:save"]');
+        if (save)
+            save.disabled = !quietChanged(this.#quietDraft, quiet, this.#browserZone);
+        const discard = this.#root.querySelector('[data-action="quiet:discard"]');
+        if (discard)
+            discard.disabled = !quietEdited(this.#quietDraft, quiet, this.#browserZone);
+    }
+    /** Shows what a save refused, field by field, and moves focus to the first. */
+    #refuseQuiet(errors, draft) {
+        this.#quietErrors = errors;
+        this.#quietStatus.textContent = this.#copy.quietFixFields;
+        const [first] = Object.keys(errors);
+        const control = first === undefined ? null : quietErrorControl(first, draft);
+        if (control !== null)
+            this.#orderFocus = control;
+    }
+    async #saveQuiet() {
+        const client = this.#client;
+        const quiet = this.#quiet;
+        if (!client || !quiet || this.#pending)
+            return;
+        const draft = this.#quietShown(quiet);
+        const local = quietDraftErrors(draft);
+        if (Object.keys(local).length > 0) {
+            this.#refuseQuiet(local, draft);
+            this.#render(this.#view);
+            return;
+        }
+        await this.#writeQuiet(() => client.saveQuietHours(quietSaveRequest(draft), {
+            timeoutMs: REQUEST_TIMEOUT_MS,
+        }), this.#copy.quietSaved, draft);
+    }
+    async #turnOffQuiet() {
+        const client = this.#client;
+        if (!client || !this.#quiet || this.#pending)
+            return;
+        await this.#writeQuiet(() => client.resetQuietHours({ timeoutMs: REQUEST_TIMEOUT_MS }), this.#copy.quietTurnedOff, null);
+    }
+    async #writeQuiet(write, done, draft) {
+        const generation = this.#generation;
+        this.#pending = true;
+        this.#render(this.#view);
+        this.#orderFocus = null;
+        try {
+            const written = await write();
+            if (generation !== this.#generation)
+                return;
+            this.#quiet = written;
+            this.#quietDraft = null;
+            this.#quietErrors = {};
+            this.#quietStatus.textContent = done;
+            // Save has nothing left to do; the next thing is turning it off, or,
+            // once off, turning it on again.
+            this.#orderFocus = written.configured ? "quiet:turn-off" : "quiet:save";
+            this.#emit("quiet-hours-changed", { configured: written.configured });
+        }
+        catch (error) {
+            if (generation !== this.#generation)
+                return;
+            const problem = error instanceof WhooshBangProblemError ? error.problem : null;
+            if (problem?.code === "recipient_capability_invalid" ||
+                problem?.code === "resource_expired") {
+                this.#renderFailure(error);
+                return;
+            }
+            this.#emit("error", {
+                ...(problem ? { code: problem.code } : {}),
+                recoverable: true,
+            });
+            const refused = problem?.code === "request_invalid" ? quietProblemErrors(problem) : {};
+            // The edit is kept either way, so trying again costs nothing.
+            if (draft !== null && Object.keys(refused).length > 0)
+                this.#refuseQuiet(refused, draft);
+            else
+                this.#quietStatus.textContent = this.#copy.quietSaveFailed;
+        }
+        finally {
+            this.#pending = false;
+            if (generation === this.#generation && this.#view.state !== "expired") {
+                this.#orderFocus ??= "quiet:save";
+                this.#render(this.#view);
+            }
+        }
+    }
+    #quietSection(view) {
+        const quiet = this.#quiet;
+        if (!quiet || (view.state !== "ready" && view.state !== "handoff"))
+            return null;
+        const draft = this.#quietShown(quiet);
+        const offered = new Set(view.channels.map((channel) => channel.channel));
+        const channels = QUIET_CHANNELS.filter((channel) => offered.has(channel));
+        this.#quietStatus.className = "quiet-status";
+        this.#quietStatus.setAttribute("role", "status");
+        this.#quietStatus.setAttribute("aria-live", "polite");
+        const clear = (field) => {
+            if (this.#quietErrors[field] === undefined)
+                return;
+            this.#quietErrors = Object.fromEntries(Object.entries(this.#quietErrors).filter(([key]) => key !== field));
+        };
+        return renderQuietSection({
+            changed: quietChanged(this.#quietDraft, quiet, this.#browserZone),
+            channelName: (channel) => channelLabel(channel, view.locale),
+            channels: channels.length > 0 ? channels : QUIET_CHANNELS,
+            copy: this.#copy,
+            disabled: this.#pending,
+            draft,
+            edited: quietEdited(this.#quietDraft, quiet, this.#browserZone),
+            errors: this.#quietErrors,
+            locale: view.locale,
+            on: {
+                addWindow: () => {
+                    clear("/windows");
+                    this.#editQuiet(addQuietWindow, {
+                        focus: `quiet:remove:${String(draft.windows.length)}`,
+                    });
+                },
+                discard: () => {
+                    this.#quietDraft = null;
+                    this.#quietErrors = {};
+                    this.#quietStatus.textContent = "";
+                    this.#orderFocus = "quiet:save";
+                    this.#render(this.#view);
+                },
+                removeWindow: (index) => {
+                    // Errors are kept by position, which a removal shifts.
+                    this.#quietErrors = {};
+                    const remaining = draft.windows.length - 1;
+                    this.#editQuiet((current) => removeQuietWindow(current, index), {
+                        focus: remaining === 0
+                            ? "quiet:add"
+                            : `quiet:remove:${String(Math.min(index, remaining - 1))}`,
+                    });
+                },
+                save: () => {
+                    void this.#saveQuiet();
+                },
+                setBehaviour: (channel, behaviour) => {
+                    clear(`/channels/${channel}`);
+                    this.#editQuiet((current) => ({
+                        ...current,
+                        channels: { ...current.channels, [channel]: behaviour },
+                    }));
+                },
+                setCritical: (on) => {
+                    this.#editQuiet((current) => ({
+                        ...current,
+                        criticalBreakthrough: on,
+                    }));
+                },
+                setQuietChannel: (bindingId) => {
+                    clear("/quiet_channel_binding_id");
+                    this.#editQuiet((current) => ({
+                        ...current,
+                        quietChannelBindingId: bindingId,
+                    }));
+                },
+                setTime: (index, edge, value) => {
+                    this.#editQuiet((current) => setQuietWindow(current, index, { [edge]: value }), { render: false });
+                },
+                setTimeZone: (zone) => {
+                    clear("/time_zone");
+                    this.#editQuiet((current) => ({ ...current, timeZone: zone }));
+                },
+                setWhenWithheld: (value) => {
+                    clear("/quiet_channel_binding_id");
+                    this.#editQuiet((current) => ({ ...current, whenWithheld: value }));
+                },
+                toggleDay: (index, day) => {
+                    clear(`/windows/${String(index)}/days`);
+                    this.#editQuiet((current) => toggleQuietDay(current, index, day));
+                },
+                turnOff: () => {
+                    void this.#turnOffQuiet();
+                },
+            },
+            quiet,
+            status: this.#quietStatus,
+        });
+    }
+    /**
+     * The panel's parts as tabs: channels, the escalation order, quiet hours
+     * and the kinds of message. Every part is in the tree; only the chosen one is shown, so a
+     * refresh or poll never moves the recipient off the tab they are on.
+     */
+    #appendParts(surface, parts, copy) {
+        const [only] = parts;
+        if (parts.length === 1 && only) {
+            surface.append(only.content);
+            return;
+        }
+        const selected = parts.some((part) => part.key === this.#tab)
+            ? this.#tab
+            : "channels";
+        const tablist = document.createElement("div");
+        tablist.className = "tabs";
+        tablist.setAttribute("role", "tablist");
+        tablist.setAttribute("aria-label", copy.heading);
+        const choose = (key, focus) => {
+            this.#tab = key;
+            if (focus)
+                this.#orderFocus = `tab:${key}`;
+            this.#render(this.#view);
+        };
+        parts.forEach((part, index) => {
+            const chosen = part.key === selected;
+            const tab = document.createElement("button");
+            tab.type = "button";
+            tab.className = "tab";
+            tab.id = `tab-${part.key}`;
+            tab.dataset["action"] = `tab:${part.key}`;
+            tab.setAttribute("role", "tab");
+            tab.setAttribute("aria-controls", `panel-${part.key}`);
+            tab.setAttribute("aria-selected", String(chosen));
+            tab.tabIndex = chosen ? 0 : -1;
+            tab.textContent = part.label;
+            tab.addEventListener("click", () => {
+                choose(part.key, false);
+            });
+            // Arrow keys move between tabs, Home and End to the ends.
+            tab.addEventListener("keydown", (event) => {
+                const last = parts.length - 1;
+                const target = event.key === "ArrowRight"
+                    ? index === last
+                        ? 0
+                        : index + 1
+                    : event.key === "ArrowLeft"
+                        ? index === 0
+                            ? last
+                            : index - 1
+                        : event.key === "Home"
+                            ? 0
+                            : event.key === "End"
+                                ? last
+                                : null;
+                const next = target === null ? undefined : parts[target];
+                if (!next)
+                    return;
+                event.preventDefault();
+                choose(next.key, true);
+            });
+            tablist.append(tab);
+            part.content.id = `panel-${part.key}`;
+            part.content.setAttribute("role", "tabpanel");
+            part.content.setAttribute("aria-labelledby", `tab-${part.key}`);
+            part.content.hidden = !chosen;
+        });
+        surface.append(tablist, ...parts.map((part) => part.content));
+    }
     /**
      * Rebuilds the shadow tree.
      *
@@ -889,16 +1473,36 @@ export class WhooshBangRecipientSettingsElement extends HTMLElement {
             item.append(actions);
             list.append(item);
         }
-        surface.append(list);
+        const channelsPanel = document.createElement("div");
+        channelsPanel.append(list);
+        const parts = [
+            { content: channelsPanel, key: "channels", label: copy.tabChannels },
+        ];
+        const orderSection = this.#orderSection(view);
+        if (orderSection)
+            parts.push({
+                content: orderSection,
+                key: "order",
+                label: copy.orderHeading,
+            });
+        const quietSection = this.#quietSection(view);
+        if (quietSection)
+            parts.push({
+                content: quietSection,
+                key: "quiet",
+                label: copy.quietHeading,
+            });
         if (view.categories.length > 0) {
-            const categoryHeading = document.createElement("h3");
-            categoryHeading.className = "categories-heading";
-            categoryHeading.textContent = copy.categoriesHeading;
-            surface.append(categoryHeading);
+            const categoriesPanel = document.createElement("div");
+            parts.push({
+                content: categoriesPanel,
+                key: "categories",
+                label: copy.categoriesHeading,
+            });
             const categoryBody = document.createElement("p");
             categoryBody.className = "status";
             categoryBody.textContent = copy.categoriesBody;
-            surface.append(categoryBody);
+            categoriesPanel.append(categoryBody);
             const categories = document.createElement("ul");
             for (const category of view.categories) {
                 const item = document.createElement("li");
@@ -941,8 +1545,9 @@ export class WhooshBangRecipientSettingsElement extends HTMLElement {
                 item.append(control);
                 categories.append(item);
             }
-            surface.append(categories);
+            categoriesPanel.append(categories);
         }
+        this.#appendParts(surface, parts, copy);
         // Customer identity owns the panel heading; this quiet attribution names
         // the product operating the component without replacing or competing with
         // the customer's configured name and logo.
@@ -955,12 +1560,34 @@ export class WhooshBangRecipientSettingsElement extends HTMLElement {
         platformLink.href = "https://whooshbang.com";
         platformLink.rel = "noreferrer";
         platformLink.target = "_blank";
-        platformLink.textContent = "Powered by WhooshBang";
+        platformLink.append(whooshbangMark(), "Powered by WhooshBang");
         platformBrand.append(platformLink);
         surface.append(platformBrand);
         root.append(surface);
-        if (focusedControl) {
-            const restored = root.querySelector(`[data-action="${focusedControl}"], [data-focus-key="${focusedControl}"]`);
+        const wanted = this.#orderFocus ?? focusedControl;
+        this.#orderFocus = null;
+        if (wanted) {
+            const find = (key) => root.querySelector(`[data-action="${key}"], [data-focus-key="${key}"]`);
+            let restored = find(wanted);
+            // An arrow that just reached the end of the list is disabled; its
+            // partner is the natural next press. Any other vanished order control
+            // hands focus to the tier the recipient is editing.
+            if (wanted.startsWith("order:") && (!restored || restored.disabled)) {
+                const partner = wanted.startsWith("order:up:")
+                    ? wanted.replace("order:up:", "order:down:")
+                    : wanted.startsWith("order:down:")
+                        ? wanted.replace("order:down:", "order:up:")
+                        : null;
+                const alternate = partner ? find(partner) : null;
+                restored =
+                    alternate && !alternate.disabled
+                        ? alternate
+                        : find(`order:level:${this.#orderLevel}`);
+            }
+            // A quiet-hours control that went away, or cannot take focus, hands
+            // focus to the tab.
+            if (wanted.startsWith("quiet:") && (!restored || restored.disabled))
+                restored = find("tab:quiet");
             restored?.focus();
         }
         else if (fallbackUrl) {