@arraypress/extension-kit 1.8.0 → 1.10.0

package/src/dom/copy.js

@@ -0,0 +1,84 @@
+/**
+ * Copying in several formats at once: plain text, and HTML for apps that paste it rich (a link
+ * with its title in Google Docs, Slack or Notion), from a page, a popup or a content script.
+ * Says whether it worked, so a caller can offer another way when the page won't let it.
+ *
+ * Chrome lets the focused page write without a click (it grants clipboard-write to the active
+ * tab), so a content script can copy from a context-menu click or a keyboard shortcut; a page
+ * served over plain HTTP has no clipboard API, and one with `Permissions-Policy:
+ * clipboard-write=()` refuses it: there the copy command is tried, which needs a click in the page.
+ *
+ * @module dom/copy
+ */
+
+/**
+ * What to put on the clipboard.
+ *
+ * @typedef {object} ClipboardFormats
+ * @property {string} text Plain text, for every app.
+ * @property {string} [html] HTML, for apps that paste formatted text.
+ */
+
+/**
+ * The copy command, with a copy listener that writes the formats: it runs first (capture, on the
+ * window) and stops the page's own listeners from changing what's copied.
+ *
+ * @param {Document} doc - The page.
+ * @param {ClipboardFormats} formats - What to copy.
+ * @returns {boolean} Whether the command ran and wrote them.
+ */
+function copyCommand(doc, { text, html }) {
+  const view = doc.defaultView;
+  if (!view) return false;
+  let wrote = false;
+  /** @param {ClipboardEvent} event */
+  const onCopy = (event) => {
+    if (!event.clipboardData) return;
+    event.clipboardData.setData('text/plain', text);
+    if (html !== undefined) event.clipboardData.setData('text/html', html);
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    wrote = true;
+  };
+  view.addEventListener('copy', onCopy, true);
+  try {
+    return doc.execCommand('copy') && wrote;
+  } catch {
+    return false;
+  } finally {
+    view.removeEventListener('copy', onCopy, true);
+  }
+}
+
+/**
+ * Put text, and HTML when given, on the clipboard: the clipboard API (one item holding both
+ * formats), else the copy command.
+ *
+ * @param {Document} doc - The page, popup or content script's document.
+ * @param {ClipboardFormats} formats - Plain text, and HTML for rich pasting.
+ * @returns {Promise<boolean>} Whether it's on the clipboard.
+ * @example
+ * const link = document.createElement('a');
+ * link.href = url;
+ * link.textContent = title;
+ * if (!(await copyFormats(document, { text: `${title} – ${url}`, html: link.outerHTML }))) offerCopyButton();
+ */
+export async function copyFormats(doc, { text, html }) {
+  const view = doc.defaultView;
+  const clipboard = view?.navigator.clipboard;
+  if (view && clipboard) {
+    try {
+      if (html === undefined) await clipboard.writeText(text);
+      else {
+        await clipboard.write([new view.ClipboardItem({
+          'text/plain': new view.Blob([text], { type: 'text/plain' }),
+          'text/html': new view.Blob([html], { type: 'text/html' }),
+        })]);
+      }
+      return true;
+    } catch {
+      // No focus, or the page's permissions policy: the copy command below.
+    }
+  }
+  return copyCommand(doc, { text, html });
+}

package/src/dom/i18n.d.ts

@@ -45,3 +45,20 @@ export declare function translator(i18n: Pick<I18nApi, 'getMessage'>): (key: str
  * @returns {void}
  */
 export declare function localize(root: ParentNode, i18n: I18nApi): void;
+/**
+ * A count in words, its number written as the person's language writes numbers: one message for
+ * one, another (with the number as `$1`) for any other count.
+ *
+ * @param {number} count - How many.
+ * @param {string} one - The message for one (`"1 colour"`).
+ * @param {string} many - The message for others (`"$COUNT$ colours"`, its placeholder `$1`).
+ * @param {{t: (key: string, substitutions?: string | string[]) => string, lang: string}} words - The
+ *   page's message lookup and the UI language.
+ * @returns {string} The words.
+ * @example
+ * counted(1200, 'panelColoursOne', 'panelColours', { t, lang: 'en-GB' }); // '1,200 colours'
+ */
+export declare const counted: (count: number, one: string, many: string, { t, lang }: {
+    t: (key: string, substitutions?: string | string[]) => string;
+    lang: string;
+}) => string;

package/src/dom/i18n.js

@@ -60,3 +60,18 @@ export function localize(root, i18n) {
   }
   if ('documentElement' in root) /** @type {Document} */ (root).documentElement.lang = i18n.getUILanguage();
 }
+
+/**
+ * A count in words, its number written as the person's language writes numbers: one message for
+ * one, another (with the number as `$1`) for any other count.
+ *
+ * @param {number} count - How many.
+ * @param {string} one - The message for one (`"1 colour"`).
+ * @param {string} many - The message for others (`"$COUNT$ colours"`, its placeholder `$1`).
+ * @param {{t: (key: string, substitutions?: string | string[]) => string, lang: string}} words - The
+ *   page's message lookup and the UI language.
+ * @returns {string} The words.
+ * @example
+ * counted(1200, 'panelColoursOne', 'panelColours', { t, lang: 'en-GB' }); // '1,200 colours'
+ */
+export const counted = (count, one, many, { t, lang }) => (count === 1 ? t(one) : t(many, [count.toLocaleString(lang)]));

package/src/dom/make.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Making a page's elements in a line: an element with its class and text, an
+ * icon from the page's SVG sprite, and Chrome's 24px icon button with its
+ * tooltip. For extension pages and content-script overlays alike (pass the
+ * document the element belongs to).
+ *
+ * @module dom/make
+ */
+/**
+ * An element with a class and text.
+ *
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag - Its tag.
+ * @param {string} [className] - Its class.
+ * @param {string} [text] - Its text.
+ * @param {Document} [doc] - Its document. Default `document`.
+ * @returns {HTMLElementTagNameMap[K]} It.
+ * @example
+ * make('span', 'meta', '12 colours');
+ */
+export declare function make<K extends keyof HTMLElementTagNameMap>(tag: K, className?: string, text?: string, doc?: Document): HTMLElementTagNameMap[K];
+/**
+ * An icon from the page's SVG sprite (`<symbol id="i-copy">`), hidden from screen readers.
+ *
+ * @param {string} id - The symbol's id, without `#`.
+ * @param {string} [className] - More classes beside `icon`.
+ * @param {Document} [doc] - Its document. Default `document`.
+ * @returns {SVGSVGElement} The icon.
+ * @example
+ * button.append(spriteIcon('i-copy'));
+ */
+export declare function spriteIcon(id: string, className?: string, doc?: Document): SVGSVGElement;
+/**
+ * Chrome's icon button (chrome-ui.css `.icon-button`): an icon, its label as tooltip and for
+ * screen readers.
+ *
+ * @param {object} options
+ * @param {string} options.icon - The sprite symbol's id.
+ * @param {string} options.label - What it does.
+ * @param {() => void} options.onClick - Doing it.
+ * @param {string} [options.className] - More classes.
+ * @param {Document} [options.doc] - Its document. Default `document`.
+ * @returns {HTMLButtonElement} The button.
+ * @example
+ * iconButton({ icon: 'i-copy', label: 'Copy', onClick: () => copy(hex) });
+ */
+export declare function iconButton({ icon, label, onClick, className, doc }: {
+    icon: string;
+    label: string;
+    onClick: () => void;
+    className?: string;
+    doc?: Document;
+}): HTMLButtonElement;

package/src/dom/make.js

@@ -0,0 +1,71 @@
+/**
+ * Making a page's elements in a line: an element with its class and text, an
+ * icon from the page's SVG sprite, and Chrome's 24px icon button with its
+ * tooltip. For extension pages and content-script overlays alike (pass the
+ * document the element belongs to).
+ *
+ * @module dom/make
+ */
+
+/**
+ * An element with a class and text.
+ *
+ * @template {keyof HTMLElementTagNameMap} K
+ * @param {K} tag - Its tag.
+ * @param {string} [className] - Its class.
+ * @param {string} [text] - Its text.
+ * @param {Document} [doc] - Its document. Default `document`.
+ * @returns {HTMLElementTagNameMap[K]} It.
+ * @example
+ * make('span', 'meta', '12 colours');
+ */
+export function make(tag, className = '', text = '', doc = document) {
+  const element = doc.createElement(tag);
+  if (className) element.className = className;
+  if (text) element.textContent = text;
+  return element;
+}
+
+/**
+ * An icon from the page's SVG sprite (`<symbol id="i-copy">`), hidden from screen readers.
+ *
+ * @param {string} id - The symbol's id, without `#`.
+ * @param {string} [className] - More classes beside `icon`.
+ * @param {Document} [doc] - Its document. Default `document`.
+ * @returns {SVGSVGElement} The icon.
+ * @example
+ * button.append(spriteIcon('i-copy'));
+ */
+export function spriteIcon(id, className = '', doc = document) {
+  const svg = doc.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  svg.setAttribute('class', `icon ${className}`.trim());
+  svg.setAttribute('aria-hidden', 'true');
+  const use = doc.createElementNS('http://www.w3.org/2000/svg', 'use');
+  use.setAttribute('href', `#${id}`);
+  svg.append(use);
+  return svg;
+}
+
+/**
+ * Chrome's icon button (chrome-ui.css `.icon-button`): an icon, its label as tooltip and for
+ * screen readers.
+ *
+ * @param {object} options
+ * @param {string} options.icon - The sprite symbol's id.
+ * @param {string} options.label - What it does.
+ * @param {() => void} options.onClick - Doing it.
+ * @param {string} [options.className] - More classes.
+ * @param {Document} [options.doc] - Its document. Default `document`.
+ * @returns {HTMLButtonElement} The button.
+ * @example
+ * iconButton({ icon: 'i-copy', label: 'Copy', onClick: () => copy(hex) });
+ */
+export function iconButton({ icon, label, onClick, className = '', doc = document }) {
+  const button = make('button', `icon-button ${className}`.trim(), '', doc);
+  button.type = 'button';
+  button.title = label;
+  button.setAttribute('aria-label', label);
+  button.append(spriteIcon(icon, '', doc));
+  button.addEventListener('click', onClick);
+  return button;
+}

package/src/frame/window.d.ts

@@ -1,12 +1,17 @@
 /**
- * Chrome's window around a page: the macOS tab strip and toolbar (light or dark, the default
- * theme), drawn as HTML. Shared by the store screenshots (`build/store-frame`, which lays it on a
- * 1280×800 canvas in Playwright) and by extension pages, which draw it on a canvas around a
- * capture through {@link windowChromeSvg} (an SVG image with the HTML inside, which Chrome draws
- * without tainting the canvas). The markup is XML-clean so both can use it.
+ * Windows around a page, drawn as HTML: Chrome's (the macOS tab strip and toolbar) and a plain
+ * macOS window's title bar, light or dark, sharing the traffic lights, the colours and the
+ * shadow. Chrome's is shared by the store screenshots (`build/store-frame`, which lays it on a
+ * 1280×800 canvas in Playwright) and by extension pages, which draw either on a canvas around a
+ * capture through {@link windowChromeSvg} or {@link macWindowSvg} (an SVG image with the HTML
+ * inside, which Chrome draws without tainting the canvas). The markup is XML-clean so both can
+ * use it.
  *
  * Window metrics follow Chrome's 2023 refresh on macOS (tabs 34px high in a 42px strip, a 46px
- * toolbar with a pill omnibox).
+ * toolbar with a pill omnibox) and AppKit's titled window as macOS 26 and later draw it, measured
+ * on macOS 27.2 (`NSThemeFrame`'s `cornerRadius` 16, a 32pt title bar, the window buttons 14pt
+ * at 9, 32 and 55 from the left and 9 from the top, the title in the 13pt headline font at 85,
+ * after the buttons).
  *
  * @module frame/window
  */
@@ -15,8 +20,20 @@ export declare const WINDOW_BARS: Readonly<{
     strip: 42;
     toolbar: 46;
 }>;
+/** A plain macOS window (macOS 26 and later): its title bar's height and its corners' radius (px). */
+export declare const MAC_WINDOW: Readonly<{
+    titleBar: 32;
+    radius: 16;
+}>;
 /** The window's default width (px): the store screenshot's. */
 export declare const WINDOW_W = 1152;
+/**
+ * Text made safe for the drawn windows' HTML (and the store screenshots').
+ *
+ * @param {unknown} s - Text.
+ * @returns {string} It, escaped for HTML text and attributes.
+ */
+export declare const esc: (s: unknown) => string;
 /**
  * A letter favicon for made-up sites (no real brands).
  *
@@ -26,7 +43,25 @@ export declare const WINDOW_W = 1152;
  * @returns {string} A data: URL of the SVG.
  */
 export declare const letterIcon: (letter: string, bg: string, fg?: string) => string;
-/** Chrome's light and dark window colours, and the canvas behind. */
+export type WindowShadow = {
+    /**
+     * How far down it falls.
+     */
+    y: number;
+    /**
+     * Its blur.
+     */
+    blur: number;
+    /**
+     * Its colour.
+     */
+    color: string;
+};
+/**
+ * Chrome's light and dark window colours, a macOS title bar's (`titleBar`, and `titleLine` below
+ * it, as AppKit draws them), the canvas behind, and the window's shadow (`windowShadow` for a
+ * canvas's `shadow*`, `shadow` for CSS).
+ */
 export declare const THEMES: {
     light: {
         bg: string;
@@ -43,6 +78,9 @@ export declare const THEMES: {
         url: string;
         urlDim: string;
         contentLine: string;
+        titleBar: string;
+        titleLine: string;
+        windowShadow: WindowShadow;
         shadow: string;
     };
     dark: {
@@ -60,6 +98,9 @@ export declare const THEMES: {
         url: string;
         urlDim: string;
         contentLine: string;
+        titleBar: string;
+        titleLine: string;
+        windowShadow: WindowShadow;
         shadow: string;
     };
 };
@@ -118,3 +159,31 @@ export declare function windowChrome({ tabs, url, urlHost, theme, w, ext }: {
  * const svg = windowChromeSvg({ tabs: [{ title: 'Example', icon: letterIcon('E', '#1a73e8'), active: true }], url: 'example.com', w: 1280 });
  */
 export declare function windowChromeSvg(options: Parameters<typeof windowChrome>[0]): string;
+/**
+ * A plain macOS window's title bar, as HTML: the traffic lights at the left, the title after
+ * them (macOS 26 on), a hairline below.
+ *
+ * @param {object} options - What to draw.
+ * @param {string} options.title - The window's title.
+ * @param {Theme} [options.theme] - Default light.
+ * @param {number} [options.w] - The window's width. Default {@link WINDOW_W}.
+ * @returns {string} The HTML, with its own styles.
+ */
+declare function macTitleBar({ title, theme, w }: {
+    title: string;
+    theme?: Theme;
+    w?: number;
+}): string;
+/**
+ * A plain macOS window's title bar as a standalone SVG image, `w` wide and `MAC_WINDOW.titleBar`
+ * high (scale it when drawing), for an extension page to draw on a canvas as
+ * {@link windowChromeSvg}'s bars are drawn. The window's corners (`MAC_WINDOW.radius`) and its
+ * shadow (`THEMES[theme].windowShadow`) are the canvas's to draw.
+ *
+ * @param {Parameters<typeof macTitleBar>[0]} options - As {@link macTitleBar}.
+ * @returns {string} The SVG markup.
+ * @example
+ * const svg = macWindowSvg({ title: 'Example', theme: 'dark', w: 1280 });
+ */
+export declare function macWindowSvg(options: Parameters<typeof macTitleBar>[0]): string;
+export {};

package/src/frame/window.js

@@ -1,12 +1,17 @@
 /**
- * Chrome's window around a page: the macOS tab strip and toolbar (light or dark, the default
- * theme), drawn as HTML. Shared by the store screenshots (`build/store-frame`, which lays it on a
- * 1280×800 canvas in Playwright) and by extension pages, which draw it on a canvas around a
- * capture through {@link windowChromeSvg} (an SVG image with the HTML inside, which Chrome draws
- * without tainting the canvas). The markup is XML-clean so both can use it.
+ * Windows around a page, drawn as HTML: Chrome's (the macOS tab strip and toolbar) and a plain
+ * macOS window's title bar, light or dark, sharing the traffic lights, the colours and the
+ * shadow. Chrome's is shared by the store screenshots (`build/store-frame`, which lays it on a
+ * 1280×800 canvas in Playwright) and by extension pages, which draw either on a canvas around a
+ * capture through {@link windowChromeSvg} or {@link macWindowSvg} (an SVG image with the HTML
+ * inside, which Chrome draws without tainting the canvas). The markup is XML-clean so both can
+ * use it.
  *
  * Window metrics follow Chrome's 2023 refresh on macOS (tabs 34px high in a 42px strip, a 46px
- * toolbar with a pill omnibox).
+ * toolbar with a pill omnibox) and AppKit's titled window as macOS 26 and later draw it, measured
+ * on macOS 27.2 (`NSThemeFrame`'s `cornerRadius` 16, a 32pt title bar, the window buttons 14pt
+ * at 9, 32 and 55 from the left and 9 from the top, the title in the 13pt headline font at 85,
+ * after the buttons).
  *
  * @module frame/window
  */
@@ -14,14 +19,19 @@
 /** The tab strip's and the toolbar's heights (px): the content starts below both. */
 export const WINDOW_BARS = Object.freeze({ strip: 42, toolbar: 46 });
 
+/** A plain macOS window (macOS 26 and later): its title bar's height and its corners' radius (px). */
+export const MAC_WINDOW = Object.freeze({ titleBar: 32, radius: 16 });
+
 /** The window's default width (px): the store screenshot's. */
 export const WINDOW_W = 1152;
 
 /**
+ * Text made safe for the drawn windows' HTML (and the store screenshots').
+ *
  * @param {unknown} s - Text.
  * @returns {string} It, escaped for HTML text and attributes.
  */
-const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+export const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
 
 /** Material icon paths (24×24). */
 const P = {
@@ -60,22 +70,69 @@ const icon = (name, size = 20) =>
 export const letterIcon = (letter, bg, fg = '#fff') =>
   `data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><rect width="16" height="16" rx="4" fill="${bg}"/><text x="8" y="12" font-family="-apple-system,Helvetica,Arial" font-size="11" font-weight="700" text-anchor="middle" fill="${fg}">${letter}</text></svg>`)}`;
 
-/** Chrome's light and dark window colours, and the canvas behind. */
+/**
+ * A window's shadow: soft and dropped below it, as macOS draws one (px; `blur` as CSS's and a
+ * canvas's `shadowBlur`, twice the blur's standard deviation).
+ *
+ * @typedef {object} WindowShadow
+ * @property {number} y How far down it falls.
+ * @property {number} blur Its blur.
+ * @property {string} color Its colour.
+ */
+
+/** @type {{light: WindowShadow, dark: WindowShadow}} */
+const SHADOWS = {
+  light: { y: 24, blur: 60, color: 'rgba(31,45,70,.20)' },
+  dark: { y: 24, blur: 60, color: 'rgba(0,0,0,.55)' },
+};
+
+/**
+ * A window's shadow and its hairline rim as a CSS `box-shadow`.
+ *
+ * @param {WindowShadow} shadow - The shadow.
+ * @param {string} rim - The rim's colour.
+ * @returns {string} The `box-shadow` value.
+ */
+const boxShadow = (shadow, rim) => `0 ${shadow.y}px ${shadow.blur}px ${shadow.color}, 0 0 0 .5px ${rim}`;
+
+/**
+ * Chrome's light and dark window colours, a macOS title bar's (`titleBar`, and `titleLine` below
+ * it, as AppKit draws them), the canvas behind, and the window's shadow (`windowShadow` for a
+ * canvas's `shadow*`, `shadow` for CSS).
+ */
 export const THEMES = {
   light: {
     bg: '#eef2f8', caption: '#1f1f1f', sub: '#444746',
     frame: '#dde3ea', tabText: '#1f1f1f', tabTextInactive: '#474747', tabSep: '#a8afb8', activeTab: '#ffffff',
     toolbar: '#ffffff', toolbarIcon: '#474747', omnibox: '#e9eef6', url: '#1f1f1f', urlDim: '#5e5e5e',
-    contentLine: '#d3d7dc', shadow: '0 24px 60px rgba(31,45,70,.20), 0 0 0 .5px rgba(0,0,0,.18)',
+    contentLine: '#d3d7dc', titleBar: '#ffffff', titleLine: '#eaeaea',
+    windowShadow: SHADOWS.light, shadow: boxShadow(SHADOWS.light, 'rgba(0,0,0,.18)'),
   },
   dark: {
     bg: '#1b1c1f', caption: '#e3e3e3', sub: '#c4c7c5',
     frame: '#1f1f1f', tabText: '#e3e3e3', tabTextInactive: '#c7c7c7', tabSep: '#5f6368', activeTab: '#3c3c3c',
     toolbar: '#3c3c3c', toolbarIcon: '#c7c7c7', omnibox: '#282828', url: '#e3e3e3', urlDim: '#a8a8a8',
-    contentLine: '#2a2a2a', shadow: '0 24px 60px rgba(0,0,0,.55), 0 0 0 .5px rgba(255,255,255,.14)',
+    contentLine: '#2a2a2a', titleBar: '#282828', titleLine: '#3c3c3c',
+    windowShadow: SHADOWS.dark, shadow: boxShadow(SHADOWS.dark, 'rgba(255,255,255,.14)'),
   },
 };
 
+/** The traffic lights' colours: close, minimise, zoom. */
+const LIGHTS = ['#ff5f57', '#febc2e', '#28c840'];
+
+/** The traffic lights' styles: circles with a faint edge, their size and spacing set where they're placed. */
+const LIGHTS_CSS = `.lights { position: absolute; display: flex; }
+    .lights i { width: var(--light); height: var(--light); border-radius: 50%; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }`;
+
+/**
+ * macOS's traffic lights (styled by {@link LIGHTS_CSS}).
+ *
+ * @param {{left: number, top: number, size: number, gap: number}} place - The first one's left edge, their top edge, their size and the space between them (px).
+ * @returns {string} The HTML.
+ */
+const trafficLights = ({ left, top, size, gap }) =>
+  `<span class="lights" style="left:${left}px;top:${top}px;gap:${gap}px;--light:${size}px">${LIGHTS.map((color) => `<i style="background:${color}"></i>`).join('')}</span>`;
+
 /** @typedef {keyof typeof THEMES} Theme */
 
 /**
@@ -139,7 +196,7 @@ export function windowChrome({ tabs, url, urlHost, theme = 'light', w = WINDOW_W
   const extIcons = ext.map((src) => `<img src="${src}" width="16" height="16" alt="" style="margin:0 9px"/>`).join('');
   return `
   <div class="strip">
-    <span class="lights"><i style="background:#ff5f57"></i><i style="background:#febc2e"></i><i style="background:#28c840"></i></span>
+    ${trafficLights({ left: 16, top: 15, size: 12, gap: 8 })}
     ${tabHtml}
     <span class="plus" style="left:${plusX}px">${icon('add', 18)}</span>
   </div>
@@ -151,8 +208,7 @@ export function windowChrome({ tabs, url, urlHost, theme = 'light', w = WINDOW_W
   </div>
   <style>
     .strip { position: relative; height: ${WINDOW_BARS.strip}px; background: ${t.frame}; }
-    .lights { position: absolute; left: 16px; top: 15px; display: flex; gap: 8px; }
-    .lights i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.12); }
+    ${LIGHTS_CSS}
     .tab { position: absolute; bottom: 0; height: ${TAB_H}px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 14px; box-sizing: border-box; color: ${t.tabTextInactive}; font: 12px/16px system-ui; }
     .tab.active { background: ${t.activeTab}; color: ${t.tabText}; border-radius: 10px 10px 0 0; z-index: 1; }
     .tab.active::before, .tab.active::after { content: ''; position: absolute; bottom: 0; width: 10px; height: 10px; }
@@ -189,9 +245,57 @@ export function windowChrome({ tabs, url, urlHost, theme = 'light', w = WINDOW_W
  */
 export function windowChromeSvg(options) {
   const w = options.w ?? WINDOW_W;
-  const h = WINDOW_BARS.strip + WINDOW_BARS.toolbar;
+  return svgImage(windowChrome({ ...options, w }), w, WINDOW_BARS.strip + WINDOW_BARS.toolbar);
+}
+
+/**
+ * A plain macOS window's title bar, as HTML: the traffic lights at the left, the title after
+ * them (macOS 26 on), a hairline below.
+ *
+ * @param {object} options - What to draw.
+ * @param {string} options.title - The window's title.
+ * @param {Theme} [options.theme] - Default light.
+ * @param {number} [options.w] - The window's width. Default {@link WINDOW_W}.
+ * @returns {string} The HTML, with its own styles.
+ */
+function macTitleBar({ title, theme = 'light', w = WINDOW_W }) {
+  const t = THEMES[theme];
+  return `
+  <div class="bar" style="width:${w}px">${trafficLights({ left: 9, top: 9, size: 14, gap: 9 })}<span class="title">${esc(title)}</span></div>
+  <style>
+    .bar { position: relative; height: ${MAC_WINDOW.titleBar}px; background: ${t.titleBar}; border-bottom: 1px solid ${t.titleLine}; box-sizing: border-box; }
+    ${LIGHTS_CSS}
+    .title { position: absolute; left: 85px; right: 16px; top: 0; color: ${t.tabText}; font: 600 13px/${MAC_WINDOW.titleBar - 1}px system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+  </style>`;
+}
+
+/**
+ * A plain macOS window's title bar as a standalone SVG image, `w` wide and `MAC_WINDOW.titleBar`
+ * high (scale it when drawing), for an extension page to draw on a canvas as
+ * {@link windowChromeSvg}'s bars are drawn. The window's corners (`MAC_WINDOW.radius`) and its
+ * shadow (`THEMES[theme].windowShadow`) are the canvas's to draw.
+ *
+ * @param {Parameters<typeof macTitleBar>[0]} options - As {@link macTitleBar}.
+ * @returns {string} The SVG markup.
+ * @example
+ * const svg = macWindowSvg({ title: 'Example', theme: 'dark', w: 1280 });
+ */
+export function macWindowSvg(options) {
+  const w = options.w ?? WINDOW_W;
+  return svgImage(macTitleBar({ ...options, w }), w, MAC_WINDOW.titleBar);
+}
+
+/**
+ * HTML as a standalone SVG image, `w` × `h`.
+ *
+ * @param {string} html - The HTML (XML-clean).
+ * @param {number} w - Its width (px).
+ * @param {number} h - Its height.
+ * @returns {string} The SVG markup.
+ */
+function svgImage(html, w, h) {
   return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}" viewBox="0 0 ${w} ${h}">`
     + `<foreignObject x="0" y="0" width="${w}" height="${h}">`
-    + `<div xmlns="http://www.w3.org/1999/xhtml" style="width:${w}px;height:${h}px;margin:0;-webkit-font-smoothing:antialiased">${windowChrome({ ...options, w })}</div>`
+    + `<div xmlns="http://www.w3.org/1999/xhtml" style="width:${w}px;height:${h}px;margin:0;-webkit-font-smoothing:antialiased">${html}</div>`
     + '</foreignObject></svg>';
 }