castle-web-cli 0.4.177 → 0.4.179

package/kits/physics-2d/engine/fonts.js

@@ -1,20 +1,18 @@
-// The deck's font.
+// The deck's fonts.
 //
-// Two files hold it, and the split is the whole point:
+// Two files hold them, and the split is the whole point:
 //
-//   theme.style          { "font": "Piazzolla" }   the RECORD -- readable, hand-editable
-//   fonts.generated.js   a one-line re-export      the BYTES
+//   theme.style          { "font": "Piazzolla" }   the RECORD -- primary face
+//   fonts.generated.js   static re-exports         the BYTES
 //
 // `theme.style` is data the engine reads at RUNTIME, so a font name in it is
 // just a string, and turning a runtime string into font bytes means a lookup
 // keyed by that name -- which no bundler can narrow, so it would inline all
-// nine Castle faces (495 KB) into every physics-2d deck, whose whole bundle is
-// under 900 KB. The generated module names its face in a static import
-// instead, so exactly one face ships. See castle-web-fonts' README.
+// nine Castle faces (495 KB) into every physics-2d deck. The generated module
+// names each face in a static import instead, so only the faces in use ship.
 //
-// The two can drift when someone edits `theme.style` by hand. Edit mode heals
-// that (editors/deckFont.js); a published deck is always consistent, because
-// the module is on disk when `save-deck` bundles it.
+// Faces in use = the theme primary plus every `Text.font` on actors in the
+// deck's scenes/blueprints. Edit mode keeps the module honest (editors/deckFont.js).
 
 import { FACES, faceInfo } from 'castle-web-fonts';
 
@@ -34,11 +32,19 @@ export const DEFAULT_FONT_FAMILY = 'sans-serif';
 const generated = import.meta.glob('/fonts.generated.js', { eager: true });
 const deckFontModule = generated['/fonts.generated.js'];
 
-/** The face the generated module actually carries, or null when there is none.
- * This is what the deck RENDERS in, as against what `theme.style` asks for. */
+/** The face the generated module actually carries as primary, or null. */
 export const generatedFontName =
   typeof deckFontModule?.deckFont === 'string' ? deckFontModule.deckFont : null;
 
+/** Every face the generated module ships (primary + Text extras), ordered. */
+export const generatedFontNames = (() => {
+  const listed = deckFontModule?.deckFonts;
+  if (Array.isArray(listed) && listed.length) {
+    return listed.filter((name) => typeof name === 'string' && faceInfo(name));
+  }
+  return generatedFontName ? [generatedFontName] : [];
+})();
+
 /** A CSS `font-family` value that is always safe to use: the deck's face when
  * it has one, a plain sans stack when it doesn't. */
 export const deckFontFamily = generatedFontName ?? DEFAULT_FONT_FAMILY;
@@ -50,30 +56,126 @@ export function themeFontName(themeData) {
   return typeof raw === 'string' && faceInfo(raw) ? raw : null;
 }
 
+/** Resolve a Text.font prop to a CSS family: empty/unknown → deck primary. */
+export function resolveTextFont(font) {
+  if (typeof font === 'string' && font && faceInfo(font)) return font;
+  return deckFontFamily;
+}
+
+/** Unique official face names from every Text actor in scene/blueprint files. */
+export function collectTextFontsFromFiles(files) {
+  const found = new Set();
+  for (const [path, text] of Object.entries(files ?? {})) {
+    if (!path.endsWith('.scene') || typeof text !== 'string') continue;
+    let data;
+    try {
+      data = JSON.parse(text);
+    } catch {
+      continue;
+    }
+    for (const actor of data?.actors ?? []) {
+      const name = actor?.components?.Text?.font;
+      if (typeof name === 'string' && faceInfo(name)) found.add(name);
+    }
+  }
+  return [...found];
+}
+
+/** Ordered unique official faces: primary first, then extras. */
+export function orderedDeckFonts(primary, extras = []) {
+  const out = [];
+  const seen = new Set();
+  for (const name of [primary, ...extras]) {
+    if (!name || !faceInfo(name) || seen.has(name)) continue;
+    seen.add(name);
+    out.push(name);
+  }
+  return out;
+}
+
+/** Source for `fonts.generated.js` carrying exactly `fonts` (primary = deckFont). */
+export function fontsGeneratedSource(primary, fonts) {
+  const list = orderedDeckFonts(primary, fonts);
+  if (!list.length) {
+    return `// Generated by the Theme editor. Do not edit.
+//
+// This deck has no font of its own; text renders in the default sans stack.
+export const deckFont = null;
+export const deckFonts = [];
+export const installDeckFonts = [];
+`;
+  }
+  const primaryName = list.includes(primary) ? primary : list[0];
+  const imports = list.map((name) => `install${name}`).join(', ');
+  const installers = list.map((name) => `install${name}`).join(', ');
+  const namesLit = list.map((name) => `'${name}'`).join(', ');
+  return `// Generated by the Theme editor / Text font picker. Do not edit.
+//
+// \`theme.style\` records the deck's primary font as ${primaryName}; Text actors
+// may use additional faces. This module is what puts their bytes in the
+// published bundle — each face must be named in a static import so the bundler
+// can tree-shake the rest.
+import { ${imports} } from 'castle-web-fonts';
+export { install${primaryName} as installDeckFont };
+export const deckFont = '${primaryName}';
+export const deckFonts = [${namesLit}];
+export const installDeckFonts = [${installers}];
+`;
+}
+
 let ready = null;
 
 /** Resolve once every face this deck registered can be drawn with -- the deck
- * font, and any a behavior imported for itself.
+ * font(s) in fonts.generated.js, and any a behavior imported for itself.
  *
  * Wait for this before the first frame. Canvas 2D does not trigger a font load,
  * so a `draw` hook setting `ctx.font` before the face is ready silently falls
- * back to the default -- and never repaints when the font lands, so the deck
- * looks right after a warm reload and wrong on a cold first paint.
- *
- * `document.fonts.ready` is what covers the extras, and it is the only thing
- * that can: a deck wanting a display face beside the deck font imports it
- * itself, and nothing here knows its name. A behavior module's `installBore()`
- * runs while the module graph loads, which is before the player mounts, so that
- * load is already pending by the time this is first called.
+ * back to the default -- and never repaints when the font lands.
  *
  * Never rejects: a deck whose font failed to load should still play. */
 export function fontsReady() {
   if (!ready) {
-    const install = deckFontModule?.installDeckFont;
+    const list = deckFontModule?.installDeckFonts;
+    const installers = Array.isArray(list) && list.length
+      ? list
+      : deckFontModule?.installDeckFont
+        ? [deckFontModule.installDeckFont]
+        : [];
     ready = Promise.all([
-      install ? install() : null,
+      ...installers.map((install) => (typeof install === 'function' ? install() : null)),
       typeof document === 'undefined' ? null : document.fonts?.ready,
     ]).catch(() => null);
   }
   return ready;
 }
+
+// Edit-time loads for faces not yet in the eager `fonts.generated.js` module
+// (e.g. the author just picked Text.font). Same woff2 URLs the font picker
+// uses -- served from node_modules while editing, never inlined into a publish.
+const faceLoads = new Map();
+
+/** Install one Castle face into `document.fonts` so canvas text can use it
+ * without a panel reload. No-op for unknown / empty names. Idempotent. */
+export function ensureOfficialFace(name) {
+  if (!name || !faceInfo(name)) return Promise.resolve(false);
+  if (typeof FontFace === 'undefined' || typeof document === 'undefined') {
+    return Promise.resolve(false);
+  }
+  const pending = faceLoads.get(name);
+  if (pending) return pending;
+  const load = (async () => {
+    try {
+      const face = new FontFace(
+        name,
+        `url("/node_modules/castle-web-fonts/woff2/${name}.woff2") format("woff2")`
+      );
+      await face.load();
+      document.fonts.add(face);
+      return true;
+    } catch {
+      return false;
+    }
+  })();
+  faceLoads.set(name, load);
+  return load;
+}

package/kits/physics-2d/engine/paletteField.jsx

@@ -0,0 +1,235 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  deckPaletteFromFiles,
+  pickerPageIndexFor,
+  pickerPagesFor,
+} from './palettes';
+import { cx, FieldRow, IconButton, styles } from './ui';
+import { attachDismissListeners } from './popoverDismiss';
+
+export function sameHex(a, b) {
+  return !!a && !!b && a.toLowerCase() === b.toLowerCase();
+}
+
+export function NoneSwatch({ selected, onSelect }) {
+  return (
+    <button
+      type="button"
+      className={cx(styles.swatch, selected && styles.swatchSelected)}
+      title="None"
+      aria-label="None"
+      style={{ position: 'relative', background: 'transparent' }}
+      onClick={onSelect}>
+      <span
+        aria-hidden
+        style={{
+          position: 'absolute',
+          inset: 4,
+          background:
+            'linear-gradient(to top right, transparent calc(50% - 1px), #e66 calc(50% - 1px), #e66 calc(50% + 1px), transparent calc(50% + 1px))',
+        }}
+      />
+    </button>
+  );
+}
+
+// Swatch strip shared by the docked sidebar and the compact popover.
+// `keys` paints a sprite's working palette; `hexes` paints a picker list.
+// `wrap` is the unlabeled sprite row; the named official page is an 8-col grid.
+export function PaletteGrid({
+  keys,
+  hexes,
+  palette,
+  activeKey,
+  activeHex,
+  onSelectKey,
+  onSelectHex,
+  allowNone = false,
+  noneSelected = false,
+  onSelectNone,
+  wrap = false,
+}) {
+  const items = hexes
+    ? hexes.map((hex) => ({ id: hex, hex, selected: sameHex(activeHex, hex), onClick: () => onSelectHex?.(hex) }))
+    : (keys ?? []).map((key) => ({
+        id: key,
+        hex: palette?.[key],
+        selected: activeKey === key || sameHex(activeHex, palette?.[key]),
+        onClick: () => onSelectKey?.(key),
+      }));
+  if (!allowNone && !items.length) return null;
+  return (
+    <div className={wrap ? styles.paletteSpriteRow : styles.palette}>
+      {allowNone ? <NoneSwatch selected={noneSelected} onSelect={onSelectNone} /> : null}
+      {items.map((item) => (
+        <button
+          key={item.id}
+          type="button"
+          className={cx(styles.swatch, item.selected && styles.swatchSelected)}
+          title={item.hex}
+          style={{ background: item.hex }}
+          onClick={item.onClick}
+        />
+      ))}
+    </div>
+  );
+}
+
+export function PalettePager({ name, onPage }) {
+  return (
+    <div className={styles.palettePager}>
+      <span className={styles.palettePagerName}>{name}</span>
+      <div className={styles.palettePagerBtns}>
+        <IconButton icon="chevron-left" label="Previous palette" onClick={() => onPage(-1)} />
+        <IconButton icon="chevron-right" label="Next palette" onClick={() => onPage(1)} />
+      </div>
+    </div>
+  );
+}
+
+// Anchored palette popover for inspector / paint-strip color taps.
+export function PalettePopover({ open, anchorRef, onClose, children }) {
+  const popoverRef = useRef(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+
+  useLayoutEffect(() => {
+    if (!open || !anchorRef.current) return;
+
+    function positionPopover() {
+      const anchor = anchorRef.current.getBoundingClientRect();
+      const rect = popoverRef.current?.getBoundingClientRect();
+      const margin = 8;
+      const width = rect?.width ?? 231;
+      const height = rect?.height ?? 320;
+      const maxLeft = Math.max(margin, window.innerWidth - width - margin);
+      const maxTop = Math.max(margin, window.innerHeight - height - margin);
+      const leftSide = anchor.left - width - margin;
+      const rightSide = anchor.right + margin;
+      // Prefer the side with room, then clamp a too-wide picker inside this
+      // iframe rather than sending it beyond either viewport edge.
+      const left =
+        leftSide >= margin
+          ? leftSide
+          : rightSide <= maxLeft
+            ? rightSide
+            : Math.min(maxLeft, Math.max(margin, anchor.left + anchor.width / 2 - width / 2));
+      const top = Math.min(maxTop, Math.max(margin, anchor.top));
+      setPosition({ top, left });
+    }
+
+    positionPopover();
+    window.addEventListener('resize', positionPopover);
+    window.addEventListener('scroll', positionPopover, true);
+    return () => {
+      window.removeEventListener('resize', positionPopover);
+      window.removeEventListener('scroll', positionPopover, true);
+    };
+  }, [open, anchorRef]);
+
+  useEffect(() => {
+    if (!open) return undefined;
+    return attachDismissListeners(onClose, [popoverRef, anchorRef]);
+  }, [open, onClose, anchorRef]);
+
+  if (!open) return null;
+  return createPortal(
+    <div
+      ref={popoverRef}
+      className={styles.palettePopover}
+      style={{ top: position.top, left: position.left }}
+      role="dialog"
+      aria-label="Palette">
+      {children}
+    </div>,
+    document.body
+  );
+}
+
+// Inspector field: one swatch + hex, opening the same paged official-palette
+// browser the sprite editor uses. Paging never writes theme.style. `allowNone`
+// adds a None swatch that commits `''`.
+export function PaletteColorField({
+  label,
+  value,
+  onChange,
+  files,
+  allowNone = false,
+  overridden,
+  defaultValue,
+  onReset,
+}) {
+  const current = value ?? '';
+  const [open, setOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const deckPalette = deckPaletteFromFiles(files);
+  const pages = pickerPagesFor(deckPalette);
+  const [pageIndex, setPageIndex] = useState(() => pickerPageIndexFor(pages, deckPalette));
+  const page = pages[pageIndex] ?? pages[0];
+
+  // Snap to the deck's palette only when the popover opens. `pages` /
+  // `deckPalette` are new references every render, so listing them as deps
+  // would re-run this after every pager click and bounce back to page 0.
+  useEffect(() => {
+    if (!open) return;
+    setPageIndex(pickerPageIndexFor(pages, deckPalette));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- open edge only
+  }, [open]);
+
+  function pick(hex) {
+    onChange(hex);
+    setOpen(false);
+  }
+
+  return (
+    <FieldRow label={label} overridden={overridden} defaultValue={defaultValue} onReset={onReset}>
+      <button
+        ref={buttonRef}
+        type="button"
+        className={cx(styles.select, styles.fileField, styles.paletteColorField)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        onClick={() => setOpen((next) => !next)}>
+        <span
+          className={styles.swatch}
+          aria-hidden
+          style={
+            current
+              ? { background: current }
+              : {
+                  position: 'relative',
+                  background: 'transparent',
+                  backgroundImage:
+                    'linear-gradient(to top right, transparent calc(50% - 1px), #e66 calc(50% - 1px), #e66 calc(50% + 1px), transparent calc(50% + 1px))',
+                  backgroundOrigin: 'content-box',
+                  padding: 4,
+                }
+          }
+        />
+        <span className={cx(styles.fileFieldLabel, !current && styles.fileFieldEmpty)}>
+          {current || 'None'}
+        </span>
+      </button>
+      <PalettePopover open={open} anchorRef={buttonRef} onClose={() => setOpen(false)}>
+        {page ? (
+          <>
+            <PalettePager
+              name={page.name}
+              onPage={(delta) =>
+                setPageIndex((i) => (i + delta + pages.length) % pages.length)
+              }
+            />
+            <PaletteGrid
+              hexes={page.colors}
+              activeHex={current}
+              onSelectHex={pick}
+              allowNone={allowNone}
+              noneSelected={!current}
+              onSelectNone={() => pick('')}
+            />
+          </>
+        ) : null}
+      </PalettePopover>
+    </FieldRow>
+  );
+}

package/kits/physics-2d/engine/physics/controls.js

@@ -4,11 +4,7 @@
 // thin wrappers: read input + runtime state, call these, push the result
 // through scene.physics. (Controls are touch/pointer-first; keyboard, when
 // added, should only DUPLICATE an on-screen control, never be the only input.)
-//
-// AnalogStick force mode: stickDrive (held) and stickBrake (idle) return
-// velocity deltas applied via applyImpulse — mass-independent, composable,
-// and restricted to the stick's driven axes so gravity on an undriven axis
-// is never clamped or braked.
+// Stick force-mode math lives in AnalogStick.jsx — it has no other consumer.
 
 // Authored Draggable `stiffness` (0..1, 0 = floppy .. 1 = rigid) -> the matter
 // constraint values that hold the object. Geometric, like joints.js's rope map
@@ -57,6 +53,10 @@ export function clampLength(v, max) {
 // name into shared code and had no answer at all once two fingers were down.
 export const TARGETED_CLAIM = 10;
 export const GREEDY_CLAIM = 0;
+// An actor whose behaviors implement `onTap`. Beats greedy (stick, grab-anywhere
+// sling) so the finger isn't also those, and yields to a targeted control that
+// claims later the same frame.
+export const TAP_CLAIM = 5;
 
 // Take the first fresh press this frame that `actorId` is allowed to have, and
 // claim it. `priorityFor(pointer)` returns the claim priority to bid, or null to
@@ -103,79 +103,3 @@ export function slingLaunch(anchor, pointer, props = {}) {
   const pull = slingPull(anchor, pointer, props.maxDrag ?? 160);
   return { x: -pull.x * speed, y: -pull.y * speed };
 }
-
-// AnalogStick: stick displacement from its origin, clamped to maxRadius.
-export function stickVector(pointer, origin, maxRadius = 60) {
-  return clampLength({ x: pointer.x - origin.x, y: pointer.y - origin.y }, maxRadius);
-}
-
-// Card coords before the camera -- for screen-fixed controls reading a pointer.
-export function screenPoint(pointer) {
-  return { x: pointer.screenX, y: pointer.screenY };
-}
-
-// Keep only the axes the stick is allowed to drive. An undriven axis (gravity
-// in a platformer) must never be clamped or braked by the stick.
-function drivenAxes(v, axes) {
-  return {
-    x: axes === 'vertical' ? 0 : v.x,
-    y: axes === 'horizontal' ? 0 : v.y,
-  };
-}
-
-// Smallest signed angle from `from` to `to`, wrapped into [−π, π].
-function angleDelta(from, to) {
-  let d = Math.atan2(to.y, to.x) - Math.atan2(from.y, from.x);
-  if (d > Math.PI) d -= 2 * Math.PI;
-  if (d < -Math.PI) d += 2 * Math.PI;
-  return d;
-}
-
-// Velocity delta while the stick is held: accelerate toward deflection × speed
-// with OG turnFriction boost on reversals, then clamp the driven axes to `speed`.
-// Returns an impulse (add to velocity); never touches an undriven axis.
-export function stickDrive(velocity, deflection, props = {}, dt) {
-  const speed = props.speed ?? 6;
-  const rampTime = props.rampTime ?? 0.2;
-  const turnBoost = props.turnBoost ?? 3;
-  const axes = props.axes ?? 'both';
-  const vDriven = drivenAxes(velocity, axes);
-
-  let boost = 1;
-  if (turnBoost > 0 && length(velocity) > 0 && length(deflection) > 0) {
-    boost = 1 + turnBoost * (Math.abs(angleDelta(velocity, deflection)) / Math.PI);
-  }
-
-  let delta;
-  if (rampTime <= 0) {
-    // Instant: one-frame snap toward the capped target on the driven axes.
-    const target = drivenAxes(
-      { x: deflection.x * speed, y: deflection.y * speed },
-      axes,
-    );
-    delta = { x: target.x - vDriven.x, y: target.y - vDriven.y };
-  } else {
-    const accel = speed / rampTime;
-    delta = drivenAxes(
-      { x: deflection.x * accel * boost * dt, y: deflection.y * accel * boost * dt },
-      axes,
-    );
-    const capped = clampLength({ x: vDriven.x + delta.x, y: vDriven.y + delta.y }, speed);
-    delta = { x: capped.x - vDriven.x, y: capped.y - vDriven.y };
-  }
-  return delta;
-}
-
-// Velocity delta while the stick is idle: Coulomb brake on the driven axes only.
-// `slowDown` is speed units lost per second (px/step per second). 0 = coast.
-export function stickBrake(velocity, props = {}, dt) {
-  const slowDown = props.slowDown ?? 20;
-  if (slowDown <= 0) return { x: 0, y: 0 };
-  const axes = props.axes ?? 'both';
-  const vDriven = drivenAxes(velocity, axes);
-  const len = length(vDriven);
-  if (len === 0) return { x: 0, y: 0 };
-  const reduce = Math.min(len, slowDown * dt);
-  const s = -reduce / len;
-  return { x: vDriven.x * s, y: vDriven.y * s };
-}

package/kits/physics-2d/engine/popoverDismiss.js

@@ -0,0 +1,17 @@
+// Shared Escape / outside-pointer dismiss for anchored popovers.
+// `insideRefs` are refs whose nodes count as "inside" (popover + anchor).
+export function attachDismissListeners(onClose, insideRefs) {
+  function onKeyDown(event) {
+    if (event.key === 'Escape') onClose();
+  }
+  function onPointerDown(event) {
+    if (insideRefs.some((ref) => ref.current?.contains(event.target))) return;
+    onClose();
+  }
+  window.addEventListener('keydown', onKeyDown);
+  window.addEventListener('pointerdown', onPointerDown);
+  return () => {
+    window.removeEventListener('keydown', onKeyDown);
+    window.removeEventListener('pointerdown', onPointerDown);
+  };
+}

package/kits/physics-2d/engine/scene.js

@@ -4,6 +4,8 @@ import { actorUsesBlueprint, getBlueprintTemplate, mergeComponents } from './blu
 import { getColliderRect, intersects, spriteIsEmpty } from './collider';
 import { systemInstallers } from './systemRegistry';
 import { deckFontFamily } from './fonts';
+import { wrapText } from './text';
+import { updateTaps } from './tap';
 
 const CARD_WIDTH = 500;
 const CARD_HEIGHT = 700;
@@ -393,6 +395,9 @@ export class SceneRuntime {
 
   update(dt) {
     this.time += dt;
+    // Before controls, so a tap on an actor that implements `onTap` claims the
+    // finger first. Targeted controls (Draggable) can still take it afterward.
+    updateTaps(this);
     for (const actor of this.getActors()) {
       this.#syncEnabled(actor);
       this.forEachBehavior(actor, (instance) => instance.update?.(actor, this, dt));
@@ -408,7 +413,12 @@ export class SceneRuntime {
   }
 
   forEachBehavior(actor, callback) {
-    for (const [behaviorName, props] of Object.entries(actor.components)) {
+    // Style paints chrome behind Text (and Style-only actors); run it first
+    // regardless of key insertion order. Sprite/Video paint Style themselves
+    // before their blit — see paintActorStyle in those behaviors.
+    const entries = Object.entries(actor.components ?? {});
+    entries.sort(([a], [b]) => (a === 'Style' ? -1 : b === 'Style' ? 1 : 0));
+    for (const [behaviorName, props] of entries) {
       if (!isBehaviorEnabled(props)) continue;
       const Behavior = this.behaviors.get(behaviorName);
       if (!Behavior) continue;
@@ -844,8 +854,7 @@ function drawDisabledSpriteLabel(ctx, actor) {
   const padY = fontSize * 0.4;
 
   const single = 'Sprite disabled';
-  const lines =
-    ctx.measureText(single).width + padX * 2 <= layout.width ? [single] : ['Sprite', 'disabled'];
+  const lines = wrapText(ctx, single, Math.max(0, layout.width - padX * 2));
   const lineHeight = fontSize * 1.15;
   const textWidth = Math.max(...lines.map((line) => ctx.measureText(line).width));
   const width = textWidth + padX * 2;

package/kits/physics-2d/engine/spriteField.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { ArtThumbnail } from './artThumbnail';
 import { cx, FieldRow, Icon, styles } from './ui';
+import { attachDismissListeners } from './popoverDismiss';
 
 // Visual sprite / image picker for inspector fields that point at art files.
 // Anchored popover (same family as FileField), not a modal: thumbnails only,
@@ -68,21 +69,7 @@ function SpritePickerPopover({ paths, current, sprites, anchorRef, onPick, onClo
   }, [anchorRef, paths.length]);
 
   useEffect(() => {
-    function onKeyDown(event) {
-      if (event.key === 'Escape') onClose();
-    }
-    function onPointerDown(event) {
-      if (listRef.current?.contains(event.target) || anchorRef.current?.contains(event.target)) {
-        return;
-      }
-      onClose();
-    }
-    window.addEventListener('keydown', onKeyDown);
-    window.addEventListener('pointerdown', onPointerDown);
-    return () => {
-      window.removeEventListener('keydown', onKeyDown);
-      window.removeEventListener('pointerdown', onPointerDown);
-    };
+    return attachDismissListeners(onClose, [listRef, anchorRef]);
   }, [anchorRef, onClose]);
 
   return (