@sphoro/bugcatch-web-sdk 0.18.0 → 0.20.0

package/src/widget.js

@@ -15,6 +15,7 @@
 import * as ICONS from './icons.js';
 import { loadPanel, loadCall } from './lazy.js';
 import { noticeNode } from './notice.js';
+import { readableOn } from './accent.js';
 
 const POSITIONS = {
   'bottom-right': 'bottom:20px;right:20px;',
@@ -50,86 +51,119 @@ function writeStoredTheme(value) {
   } catch { /* storage denied — the choice just won't outlive the page */ }
 }
 
+// The dark palette, said once and applied twice: when the site or the visitor
+// picks dark, and when 'auto' meets a system set to dark.
+const DARK = `
+  --bc-bg: #151517;
+  --bc-elevated: #1c1c1f;
+  --bc-fg: #f3f2ef;
+  --bc-muted: #b3b0aa;
+  --bc-faint: #8f8c86;
+  --bc-border: #2c2c30;
+  --bc-subtle: #1f1f22;
+  --bc-stone: #26262a;
+  --bc-raised: #303035;
+  --bc-danger: #ff6b81;
+  --bc-ok: #4fd19a;
+  --bc-warn: #f2a54a;
+  --bc-info: #79a8ff;
+  --bc-brand-ink: #b3b0aa;
+  --bc-brand-mark: #a59cff;
+  --bc-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 70px -20px rgba(0,0,0,.8), 0 8px 20px -8px rgba(0,0,0,.5);
+  --bc-shadow-sm: 0 0 0 1px rgba(255,255,255,.07), 0 1px 2px rgba(0,0,0,.4);
+  --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 14%, var(--bc-bg));`;
+
 // The launcher's stylesheet: the theme, the base rules, the dock. The panel's
 // arrives with the panel (panel/styles.js) and is added after this one.
+//
+// `accent` is the host's colour, or null for ink (accent.js). Ink is drawn
+// from the theme's own foreground, so it turns white on dark by itself; a
+// configured colour stays that colour in both.
 const css = (accent) => `
 :host { all: initial; }
 :host {
-  --bc-accent: ${accent};
-  --bc-on-accent: #fff;
-  --bc-bg: #fff;
-  --bc-elevated: #fff;
-  --bc-fg: #14161c;
-  --bc-muted: #5f6673;
-  --bc-faint: #9aa1ad;
-  --bc-border: #e6e8ee;
-  --bc-subtle: #f4f5f8;
-  --bc-raised: #fff;
-  --bc-danger: #dc2626;
-  --bc-ok: #059669;
-  --bc-warn: #b45309;
+  --bc-accent: ${accent || 'var(--bc-fg)'};
+  --bc-on-accent: ${accent ? readableOn(accent) : 'var(--bc-bg)'};
+  /* The assistant's orb: BugCatch's own three colours, or the host's accent
+     with two lighter cuts of it, so the orb on their site is in their colour. */
+  --bc-o1: ${accent ? `color-mix(in srgb, ${accent} 32%, #fff)` : '#ffb3c9'};
+  --bc-o2: ${accent || '#6a5cff'};
+  --bc-o3: ${accent ? `color-mix(in srgb, ${accent} 22%, #ffe7d1)` : '#ffd6a0'};
+  --bc-bg: #ffffff;
+  --bc-elevated: #ffffff;
+  --bc-fg: #0e0e10;
+  --bc-muted: #57544e;
+  --bc-faint: #75726c;
+  --bc-border: #e9e7e3;
+  --bc-subtle: #f6f5f3;
+  /* Warm stone: fields, chips and the selected track. */
+  --bc-stone: #f0efec;
+  --bc-raised: #ffffff;
+  --bc-danger: #c8233d;
+  --bc-ok: #0b7a55;
+  --bc-warn: #a4570a;
+  --bc-info: #2459d1;
   /* The lockup's own two colours, kept off --bc-accent on purpose: that one is
      the customer's brand, and this mark is ours. Values are the light cut of
      brand/sphoro-bugcatch-primary.svg, pulled up from near-black so the mark
      identifies itself without out-shouting the host's page. */
-  --bc-brand-ink: #4b5563;
+  --bc-brand-ink: #57544e;
   --bc-brand-mark: #5647ee;
-  --bc-shadow: 0 24px 64px rgba(10,12,16,.22), 0 4px 14px rgba(10,12,16,.08);
-  --bc-shadow-sm: 0 1px 2px rgba(10,12,16,.06), 0 1px 1px rgba(10,12,16,.04);
-  --bc-dur: 240ms;
+  --bc-shadow: 0 0 0 1px rgba(20,18,14,.06), 0 30px 70px -24px rgba(20,18,14,.30), 0 8px 20px -8px rgba(20,18,14,.10);
+  --bc-shadow-sm: 0 0 0 1px rgba(20,18,14,.06), 0 1px 2px rgba(20,18,14,.05);
+  --bc-dur: 220ms;
   --bc-ease: cubic-bezier(.22,1,.36,1);
+  /* Film grain over the orb, so it reads as light rather than a gradient. */
+  --bc-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
   /* The system everything below is drawn from. Derived tokens are written in
      terms of the ones above, so a host that overrides --bc-accent or the
      palette gets a coherent result without touching these. */
-  --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 10%, var(--bc-bg));
-  --bc-accent-line: color-mix(in srgb, var(--bc-accent) 32%, var(--bc-border));
-  --bc-ring: 0 0 0 3px color-mix(in srgb, var(--bc-accent) 22%, transparent);
+  --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 7%, var(--bc-bg));
+  --bc-accent-line: color-mix(in srgb, var(--bc-accent) 30%, var(--bc-border));
+  --bc-ring: 0 0 0 3px color-mix(in srgb, var(--bc-accent) 16%, transparent);
   --bc-r-sm: 8px;
   --bc-r-md: 12px;
-  --bc-r-lg: 18px;
-  --bc-r-xl: 22px;
+  --bc-r-lg: 16px;
+  --bc-r-xl: 20px;
   --bc-fs-xs: 11.5px;
   --bc-fs-sm: 12.5px;
   --bc-fs-md: 14px;
-  --bc-fs-lg: 16px;
+  --bc-fs-lg: 15px;
   --bc-pad: 18px;
 }
-:host(.bc-dark) {
-  --bc-bg: #14161c;
-  --bc-elevated: #1c1f27;
-  --bc-fg: #eef0f4;
-  --bc-muted: #a3aab6;
-  --bc-faint: #6f7682;
-  --bc-border: #2a2e38;
-  --bc-subtle: #1f222a;
-  --bc-raised: #363d4b;
-  --bc-warn: #f59e0b;
-  --bc-brand-ink: #9aa1ad;
-  --bc-brand-mark: #9b8fff;
-  --bc-shadow: 0 24px 64px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.4);
-  --bc-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
-  --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 18%, var(--bc-bg));
+:host(.bc-dark) {${DARK}
 }
 @media (prefers-color-scheme: dark) {
-  :host(.bc-auto) {
-    --bc-bg: #14161c;
-    --bc-elevated: #1c1f27;
-    --bc-fg: #eef0f4;
-    --bc-muted: #a3aab6;
-    --bc-faint: #6f7682;
-    --bc-border: #2a2e38;
-    --bc-subtle: #1f222a;
-    --bc-raised: #363d4b;
-    --bc-warn: #f59e0b;
-    --bc-brand-ink: #9aa1ad;
-    --bc-brand-mark: #9b8fff;
-    --bc-shadow: 0 24px 64px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.4);
-    --bc-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
-    --bc-accent-soft: color-mix(in srgb, var(--bc-accent) 18%, var(--bc-bg));
+  :host(.bc-auto) {${DARK}
   }
 }
 
 * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; }
+
+/* ---------- the orb ----------
+   The assistant's face, on the launcher and at the top of every screen: three
+   blurred colour blobs turning slowly under a highlight and grain. Hue from
+   --bc-o1..3. Sized by whoever places it. */
+.orb {
+  position: relative; display: block; flex: none; aspect-ratio: 1; border-radius: 50%;
+  background: var(--bc-o2); overflow: hidden; isolation: isolate;
+  box-shadow: inset -3px -5px 10px rgba(0,0,0,.22), inset 2px 3px 7px rgba(255,255,255,.35);
+}
+.orb::before {
+  content: ''; position: absolute; inset: -20%; border-radius: 50%; z-index: -1;
+  background:
+    radial-gradient(circle at 70% 72%, var(--bc-o3) 0%, transparent 44%),
+    radial-gradient(circle at 26% 66%, var(--bc-o1) 0%, transparent 48%),
+    radial-gradient(circle at 58% 30%, var(--bc-o2) 0%, transparent 62%);
+  filter: blur(3px);
+  animation: bc-orb-turn 18s linear infinite;
+}
+.orb::after {
+  content: ''; position: absolute; inset: 0; border-radius: 50%;
+  background: radial-gradient(circle at 34% 26%, rgba(255,255,255,.85) 0 5%, rgba(255,255,255,0) 30%), var(--bc-grain);
+  mix-blend-mode: soft-light;
+}
+@keyframes bc-orb-turn { to { transform: rotate(360deg); } }
 svg { width: 1em; height: 1em; display: block; }
 /* The hidden attribute has to actually hide. Nearly every element in here is given a
    display by a rule below, and any of them beats the attribute's own UA style
@@ -160,65 +194,50 @@ button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-vi
 @keyframes bc-launcher-in { from { opacity: 0; transform: translateY(12px) scale(.86) } to { opacity: 1; transform: none } }
 @keyframes bc-item-in { from { opacity: 0; transform: translateY(8px) scale(.96) } to { opacity: 1; transform: none } }
 
-/* ---------- dock: theme switch stacked above the launcher ---------- */
+/* ---------- dock: the launcher, and what is said beside it ---------- */
 .dock {
   position: fixed; z-index: 2147483000;
   display: flex; flex-direction: column; gap: 10px;
 }
 .dock[hidden] { display: none; }
-/* While the panel is open the switch rises above the scrim so it stays usable
-   — the panel shares the shadow root, so a change re-themes the open form. */
+/* While the panel is open the launcher rises above the scrim, so the button
+   that opened it is the button that closes it. */
 .dock.over { z-index: 2147483002; }
 .dock.at-right { align-items: flex-end; }
 .dock.at-left { align-items: flex-start; }
-/* Anchored to the top, "above the launcher" would be off-screen, so the
-   switch goes under it and the launcher stays the outermost thing. */
+/* Anchored to the top, "above the launcher" would be off-screen, so cards go
+   under it and the launcher stays the outermost thing. */
 .dock.at-top { flex-direction: column-reverse; }
 
-.themer {
-  display: inline-flex; align-items: center; gap: 2px;
-  padding: 3px; border-radius: 999px;
-  background: var(--bc-elevated); border: 1px solid var(--bc-border);
-  box-shadow: 0 6px 18px rgba(10,12,16,.14), 0 1px 3px rgba(10,12,16,.08);
-  animation: bc-launcher-in 420ms var(--bc-ease) both;
-}
-.themer button {
-  display: grid; place-items: center;
-  width: 28px; height: 28px; padding: 0;
-  border: none; border-radius: 999px; background: transparent;
-  color: var(--bc-muted); cursor: pointer;
-  transition: background var(--bc-dur) var(--bc-ease), color var(--bc-dur) var(--bc-ease), transform 140ms var(--bc-ease);
-}
-.themer button svg { font-size: 15px; }
-.themer button:hover { background: var(--bc-subtle); color: var(--bc-fg); }
-.themer button:active { transform: scale(.92); }
-.themer button[aria-pressed="true"] { background: var(--bc-accent); color: var(--bc-on-accent); }
-.themer button[aria-pressed="true"]:hover { background: var(--bc-accent); filter: brightness(1.06); }
-
-/* ---------- launcher ---------- */
+/* ---------- launcher ----------
+   A pill with the assistant's orb in it: ink by default, the host's colour when
+   they set one. The shadow is neutral, never tinted, so a bright brand colour
+   does not glow on somebody's checkout. */
 .launcher {
   position: relative;
-  display: inline-flex; align-items: center; gap: 9px;
-  height: 48px; padding: 0 20px 0 16px; border: none; border-radius: 999px;
+  display: inline-flex; align-items: center; gap: 10px;
+  height: 46px; padding: 0 18px 0 7px; border: none; border-radius: 999px;
   background: var(--bc-accent); color: var(--bc-on-accent);
-  font-size: var(--bc-fs-md); font-weight: 620; line-height: 1; letter-spacing: -.01em;
+  font-size: var(--bc-fs-md); font-weight: 560; line-height: 1; letter-spacing: -.01em;
   cursor: pointer;
-  box-shadow: 0 10px 28px color-mix(in srgb, var(--bc-accent) 34%, rgba(10,12,16,.2)), 0 2px 6px rgba(10,12,16,.16);
-  transition: transform var(--bc-dur) var(--bc-ease), box-shadow var(--bc-dur) var(--bc-ease), filter 160ms linear, padding var(--bc-dur) var(--bc-ease);
+  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 10px 26px -8px rgba(0,0,0,.36);
+  transition: transform var(--bc-dur) var(--bc-ease), box-shadow var(--bc-dur) var(--bc-ease), filter 160ms linear;
   animation: bc-launcher-in 420ms var(--bc-ease) both;
 }
-/* Two glyphs in one box: the bubble when closed, a chevron when open, turned
+/* Two faces in one circle: the orb when closed, a chevron when open, turned
    into each other so the button reads as the panel's own handle. */
-.launcher .ico { position: relative; width: 20px; height: 20px; flex: none; }
+.launcher .ico { position: relative; width: 32px; height: 32px; flex: none; }
 .launcher .ico > span {
-  position: absolute; inset: 0;
+  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%;
   transition: transform 320ms var(--bc-ease), opacity 200ms ease;
 }
-.launcher .ico svg { width: 20px; height: 20px; }
+.launcher .ico .orb { width: 32px; }
+.launcher .ico .when-open { background: color-mix(in srgb, var(--bc-on-accent) 14%, transparent); }
+.launcher .ico svg { width: 18px; height: 18px; }
 .launcher .ico .when-open { opacity: 0; transform: rotate(-90deg) scale(.6); }
 .launcher[aria-expanded="true"] .ico .when-closed { opacity: 0; transform: rotate(90deg) scale(.6); }
 .launcher[aria-expanded="true"] .ico .when-open { opacity: 1; transform: none; }
-.launcher:hover { transform: translateY(-2px); filter: brightness(1.06); }
+.launcher:hover { transform: translateY(-1px); box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 14px 30px -8px rgba(0,0,0,.42); }
 .launcher:active { transform: translateY(0) scale(.97); transition-duration: 90ms; }
 .launcher:focus-visible { outline-offset: 3px; }
 .launcher[hidden] { display: none; }
@@ -241,11 +260,11 @@ button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-vi
    In this sheet because the card beside the button exists before the panel's
    does. The tone is a colour and an icon; the site's accent is the info one. */
 .notice {
-  --tone: var(--bc-accent);
+  --tone: var(--bc-info);
   display: flex; align-items: flex-start; gap: 10px;
-  padding: 12px 12px 12px 14px; border-radius: var(--bc-r-md);
-  background: color-mix(in srgb, var(--tone) 7%, var(--bc-elevated));
-  border: 1px solid color-mix(in srgb, var(--tone) 28%, var(--bc-border));
+  padding: 11px 10px 11px 12px; border-radius: var(--bc-r-md);
+  background: var(--bc-subtle);
+  border: 1px solid var(--bc-border);
   color: var(--bc-fg);
   font-size: var(--bc-fs-sm); line-height: 1.45; text-align: left;
   animation: bc-item-in 240ms var(--bc-ease) both;
@@ -253,33 +272,48 @@ button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-vi
 .notice.tone-success { --tone: var(--bc-ok); }
 .notice.tone-warning { --tone: var(--bc-warn); }
 .notice.tone-critical { --tone: var(--bc-danger); }
-.notice-ico { flex: none; color: var(--tone); font-size: 16px; margin-top: 1px; }
+/* The tone is the icon's colour and a wash behind it — enough to tell a delay
+   from a fix at a glance, without a coloured card shouting over the form. */
+.notice-ico {
+  flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: -1px;
+  border-radius: 7px; font-size: 14px;
+  color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent);
+}
 .notice-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
-.notice-text strong { display: block; font-weight: 650; letter-spacing: -.005em; }
+.notice-text strong { display: block; font-weight: 600; letter-spacing: -.005em; }
 .notice-text p { margin: 2px 0 0; color: var(--bc-muted); white-space: pre-line; }
 .notice-cta {
-  display: inline-block; margin-top: 6px;
-  color: var(--tone); font-weight: 620; text-decoration: none;
+  display: inline-flex; align-items: center; gap: 4px; margin-top: 6px;
+  color: var(--bc-fg); font-weight: 600; text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, var(--bc-fg) 30%, transparent); text-underline-offset: 3px;
 }
-.notice-cta:hover { text-decoration: underline; text-underline-offset: 2px; }
+.notice-cta:hover { text-decoration-color: currentColor; }
 .notice-x {
   flex: none; display: grid; place-items: center;
-  width: 26px; height: 26px; margin: -4px -4px 0 0; padding: 0;
+  width: 24px; height: 24px; margin: -2px -2px 0 0; padding: 0;
   border: 0; border-radius: 999px; background: transparent;
-  color: var(--bc-muted); cursor: pointer;
+  color: var(--bc-faint); cursor: pointer;
 }
-.notice-x:hover { background: color-mix(in srgb, var(--tone) 12%, transparent); color: var(--bc-fg); }
-.notice-x svg { font-size: 14px; }
+.notice-x:hover { background: color-mix(in srgb, var(--bc-fg) 7%, transparent); color: var(--bc-fg); }
+.notice-x svg { font-size: 13px; }
 /* Beside the button it floats over somebody else's page: opaque, lifted, and
    never taller than a glance. The whole text is in the panel. */
 .notice.at-launcher {
   width: min(320px, calc(100vw - 40px));
-  box-shadow: 0 10px 28px rgba(10,12,16,.14), 0 1px 3px rgba(10,12,16,.08);
+  background: var(--bc-elevated); border-color: transparent;
+  box-shadow: var(--bc-shadow);
+  padding: 13px 12px 13px 13px;
 }
 .notice.at-launcher .notice-text p {
   display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
 }
-.notice.at-panel { margin-bottom: 10px; }
+/* In the panel they are a stack of short lines above the form, not a wall:
+   the body is held to two lines, and the whole of it was beside the button. */
+.notice.at-panel { margin-bottom: 8px; padding: 9px 8px 9px 10px; }
+.notice.at-panel .notice-text p {
+  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
+}
+.notice.at-panel .notice-cta { margin-top: 3px; }
 
 /* The dock sits in a corner of a page the widget does not own. On a notched
    phone that corner is under the home indicator, and in landscape it is under
@@ -299,25 +333,12 @@ button:focus-visible, a:focus-visible, select:focus-visible, [tabindex]:focus-vi
   .dock.over { display: none; }
 }
 @media (pointer: coarse) {
-  /* The theme switch's buttons are small glyphs whose boxes cannot grow without
-     moving the launcher under them, so each keeps its size and gets an
-     invisible target drawn around it instead. */
-  .themer button { position: relative; }
-  .themer button::after {
-    content: '';
-    position: absolute;
-    inset: -8px;
-  }
-  /* The themer's three buttons sit side by side, so their expanders would
-     overlap each other without a gap to grow into. */
-  .themer { gap: 4px; }
   .notice-x { width: 36px; height: 36px; margin: -9px -8px -6px 0; }
 }
 /* Hover is a lie on a touchscreen: it latches on tap and stays. The launcher's
    lift in particular was left applied after the panel closed. */
 @media (hover: none) {
   .launcher:hover { transform: none; filter: none; }
-  .themer button:hover { transform: none; }
 }
 
 /* ---------- while the panel's code is on its way ----------
@@ -356,7 +377,7 @@ export function mountWidget(client) {
 
   const root = host.attachShadow({ mode: 'open' });
   const style = document.createElement('style');
-  style.textContent = css(client.config.accent || '#4F46E5');
+  style.textContent = css(client.config.accent || null);
   root.appendChild(style);
 
   const position = POSITIONS[client.config.widgetPosition] ? client.config.widgetPosition : 'bottom-right';
@@ -365,30 +386,27 @@ export function mountWidget(client) {
     + (position.startsWith('top') ? ' at-top' : '');
   dock.style.cssText = POSITIONS[position];
 
-  const themer = document.createElement('div');
-  themer.className = 'themer';
-  themer.setAttribute('role', 'group');
-  themer.setAttribute('aria-label', 'Report widget theme');
-  themer.innerHTML = THEMES.map((t) => `<button type="button" data-theme="${t.value}" `
-    + `title="${t.label}" aria-label="${t.label}" aria-pressed="${t.value === theme}">${t.icon}</button>`).join('');
-
-  themer.addEventListener('click', (e) => {
-    const btn = e.target.closest('button[data-theme]');
-    if (!btn || btn.dataset.theme === theme) return;
-    theme = btn.dataset.theme;
-    // The panel lives in the same shadow root, so an open form re-themes with
-    // it rather than waiting for the next open.
-    host.className = themeClass(theme);
-    writeStoredTheme(theme);
-    themer.querySelectorAll('button').forEach((b) => {
-      b.setAttribute('aria-pressed', String(b.dataset.theme === theme));
-    });
-  });
+  // The theme is chosen inside the panel, from its header (panel/render.js),
+  // not from a switch parked beside the button on every page of the host's
+  // site. Light, dark, then the system's own choice, and round again.
+  const themeControls = {
+    current: () => theme,
+    label: () => THEMES.find((t) => t.value === theme).label,
+    cycle() {
+      const next = THEMES[(THEMES.findIndex((t) => t.value === theme) + 1) % THEMES.length];
+      theme = next.value;
+      // The panel lives in the same shadow root, so an open form re-themes with
+      // it rather than waiting for the next open.
+      host.className = themeClass(theme);
+      writeStoredTheme(theme);
+      return next;
+    },
+  };
 
   const launcher = document.createElement('button');
   launcher.className = 'launcher';
   launcher.type = 'button';
-  launcher.innerHTML = `<span class="ico" aria-hidden="true"><span class="when-closed">${ICONS.chat}</span>`
+  launcher.innerHTML = `<span class="ico" aria-hidden="true"><span class="when-closed"><span class="orb"></span></span>`
     + `<span class="when-open">${ICONS.chevronDown}</span></span><span>Report a bug</span>`;
   launcher.setAttribute('aria-haspopup', 'dialog');
   launcher.setAttribute('aria-expanded', 'false');
@@ -433,6 +451,7 @@ export function mountWidget(client) {
         dock,
         client,
         preloadCall,
+        themeControls,
         onClose: () => {
           open = null;
           dock.classList.remove('over');
@@ -484,8 +503,8 @@ export function mountWidget(client) {
       launcher.focus();
       hideLoadFailure();
     });
-    // First in the dock, so it sits furthest from the corner: above the theme
-    // switch in a bottom dock, below it in a top one.
+    // First in the dock, so it sits furthest from the corner: above the
+    // launcher in a bottom dock, below it in a top one.
     dock.prepend(failure);
   }
 
@@ -532,7 +551,7 @@ export function mountWidget(client) {
       .catch(() => { /* no card is the answer to every failure */ });
   });
 
-  dock.append(themer, launcher);
+  dock.append(launcher);
   root.appendChild(dock);
 
   document.body.appendChild(host);