@exegia/corpora-ui 0.28.0 → 1.0.0

package/src/components/user-avatar/type.ts

@@ -1,93 +0,0 @@
-import type * as React from "react"
-
-import type { AvatarPrimitive } from "@/components/ui/avatar"
-
-export type ImageStatus = Parameters<
-  NonNullable<AvatarPrimitive.Image.Props["onLoadingStatusChange"]>
->[0]
-
-/** Whether the person is reachable right now — drawn as the corner badge. */
-export type UserPresence = "online" | "offline"
-
-/** Key for one avatar's state in the store. Any stable string; `useUserAvatar`
- * generates one when the component does not name itself. */
-export type UserAvatarInstanceId = string
-
-export interface UserAvatarProps extends Omit<
-  AvatarPrimitive.Root.Props,
-  "children"
-> {
-  /** Image URL. Without one the initials show immediately — no skeleton. */
-  src?: string
-  /** Drives the initials, and the alt text unless `alt` overrides it. */
-  name?: string
-  /** Overrides the initials derived from `name`. */
-  initials?: string
-  /**
-   * Alt text for the image. Pass "" when adjacent text already names the
-   * person — the image is then decorative.
-   */
-  alt?: string
-  /**
-   * Force the skeleton, for when the identity itself is still being fetched.
-   * Omitted, it follows the image: a passed `src` skeletons until it resolves.
-   */
-  loading?: boolean
-  /**
-   * Corner badge: a green dot for `online`, a hollow grey ring for `offline`.
-   * Omitted, no badge — unless the avatar is driven by id and something set
-   * its presence in the store. Controlled when passed.
-   */
-  presence?: UserPresence
-  /**
-   * Embossed rim whose highlight follows the pointer, so the avatar reads as
-   * a lit bezel rather than a flat disc. Light and dark aware, and with a
-   * photo it samples the image's rim lightness (CORS permitting) to weight
-   * highlight against shadow, so the emboss reads on a dark portrait and a
-   * pale one alike. Static under reduced motion. On by default — pass
-   * `false` for a flat disc.
-   */
-  bezel?: boolean
-  /**
-   * Name this avatar's slice of the store so `useUserAvatarState(id)` /
-   * `useUserAvatarActions(id)` can read or drive it from anywhere under
-   * `ExegiaProvider`. Unnamed avatars key off `useId` and are dropped on
-   * unmount.
-   */
-  avatarId?: UserAvatarInstanceId
-}
-
-/** Everything the store knows about one avatar. */
-export interface UserAvatarState {
-  presence: UserPresence | null
-  /** Bezel light direction in degrees, clockwise from 12 o'clock. Continuous
-   * (may leave [0, 360)) so the rim's CSS rotation never spins the long way;
-   * `((a % 360) + 360) % 360` if you need it normalised. */
-  bezelAngle: number
-  imageStatus: ImageStatus
-  /** Perceived lightness of the loaded image's rim, 0 (black) → 1 (white),
-   * or `null` while unknown — no image yet, or one that could not be sampled
-   * (non-CORS host, no canvas). The bezel's highlight/shadow alphas follow
-   * it so the emboss reads on a dark photo and a pale one alike. */
-  imageTone: number | null
-}
-
-/** Write-only handles onto one avatar. Nothing here re-renders the caller. */
-export interface UserAvatarActions {
-  setPresence: (presence: UserPresence | null) => void
-  togglePresence: () => void
-  setBezelAngle: (angle: number) => void
-  reset: () => void
-}
-
-/** @internal Which fields the mounted component controls from props. The
- * store must never overwrite a controlled value. */
-export interface UserAvatarConfig {
-  controlsPresence: boolean
-}
-
-export interface IAudioWaveProps {
-  className?: string
-  children?: React.ReactNode
-  volume?: number
-}

package/src/components/user-avatar/use-user-avatar-state.ts

@@ -1,60 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useAtomValue, useSetAtom } from "jotai"
-
-import type {
-  UserAvatarActions,
-  UserAvatarInstanceId,
-  UserAvatarState,
-} from "./type"
-import {
-  resetUserAvatarAtom,
-  setUserAvatarBezelAngleAtom,
-  setUserAvatarPresenceAtom,
-  toggleUserAvatarPresenceAtom,
-  userAvatarStateAtom,
-} from "./user-avatar-atom"
-
-/**
- * Read the avatar registered under `avatarId` from anywhere below
- * `ExegiaProvider` — no props, no ref, no provider of its own.
- *
- * ```tsx
- * const { presence } = useUserAvatarState("me")
- * ```
- *
- * Returns the whole state object, so the caller re-renders on any change —
- * including every bezel frame while a pointer moves. A component that only
- * cares about presence should subscribe to that atom instead:
- * `useAtomValue(userAvatarPresenceAtom("me"))`.
- */
-export function useUserAvatarState(
-  avatarId: UserAvatarInstanceId
-): UserAvatarState {
-  return useAtomValue(userAvatarStateAtom(avatarId))
-}
-
-/**
- * Write-only handles onto the avatar registered under `avatarId`. Nothing
- * here subscribes, so a presence indicator elsewhere in the app can flip
- * the badge without re-rendering when the avatar changes.
- *
- * ```tsx
- * const { setPresence } = useUserAvatarActions("me")
- * socket.on("presence", (p) => setPresence(p))
- * ```
- */
-export function useUserAvatarActions(
-  avatarId: UserAvatarInstanceId
-): UserAvatarActions {
-  const setPresence = useSetAtom(setUserAvatarPresenceAtom(avatarId))
-  const togglePresence = useSetAtom(toggleUserAvatarPresenceAtom(avatarId))
-  const setBezelAngle = useSetAtom(setUserAvatarBezelAngleAtom(avatarId))
-  const reset = useSetAtom(resetUserAvatarAtom(avatarId))
-
-  return React.useMemo(
-    () => ({ setPresence, togglePresence, setBezelAngle, reset }),
-    [setPresence, togglePresence, setBezelAngle, reset]
-  )
-}

package/src/components/user-avatar/use-user-avatar.ts

@@ -1,180 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { useAtomValue, useSetAtom } from "jotai"
-import { useReducedMotion } from "motion/react"
-
-import type {
-  ImageStatus,
-  UserAvatarConfig,
-  UserAvatarInstanceId,
-  UserPresence,
-} from "./type"
-import {
-  projectUserAvatarPropsAtom,
-  removeUserAvatarInstance,
-  setUserAvatarBezelAngleAtom,
-  setUserAvatarImageStatusAtom,
-  setUserAvatarImageToneAtom,
-  userAvatarBezelAngleAtom,
-  userAvatarImageStatusAtom,
-  userAvatarImageToneAtom,
-  userAvatarPresenceAtom,
-} from "./user-avatar-atom"
-import { measureRimTone } from "./utils"
-
-export interface UseUserAvatarOptions {
-  avatarId?: UserAvatarInstanceId
-  /** Controlled presence. `undefined` leaves the store in charge. */
-  presence?: UserPresence
-  /** Track the pointer for the bezel highlight. */
-  bezel: boolean
-  /** Only meaningful with an image — no image, no status to track. */
-  hasImage: boolean
-  /** The image URL, sampled for its rim lightness once it has loaded so the
-   * bezel can pick alphas that read against it. Omit to skip sampling. */
-  src?: string
-}
-
-export interface UserAvatarBinding {
-  avatarId: UserAvatarInstanceId
-  presence: UserPresence | null
-  bezelAngle: number
-  imageStatus: ImageStatus
-  /** Rim lightness of the loaded image, 0–1, or `null` while unknown. */
-  imageTone: number | null
-  /** Hand to the image's `onLoadingStatusChange`. Stable. */
-  setImageStatus: (status: ImageStatus) => void
-  /** Attach to the avatar root — the bezel is lit relative to its centre. */
-  ref: React.RefObject<HTMLElement | null>
-}
-
-/** Below this the angle write is skipped: a rim highlight cannot show a
- * sub-degree change, and skipping keeps the pointer loop store-quiet. */
-const ANGLE_EPSILON = 1.5
-
-/**
- * Binds one avatar to its slice of the store: projects the controlled
- * `presence` prop, tracks the image status, and — while `bezel` is on —
- * follows the pointer with a rAF-coalesced `pointermove` listener that turns
- * the pointer's bearing from the avatar's centre into `bezelAngle`.
- *
- * Unnamed avatars key off `useId` and are dropped from the store on unmount;
- * a named `avatarId` outlives its component so a presence set elsewhere
- * survives a remount.
- */
-export function useUserAvatar(options: UseUserAvatarOptions): UserAvatarBinding {
-  const { presence: presenceProp, bezel, hasImage, src } = options
-  const generatedId = React.useId()
-  const avatarId = options.avatarId ?? generatedId
-  const controlsPresence = presenceProp !== undefined
-
-  const config = React.useMemo<UserAvatarConfig>(
-    () => ({ controlsPresence }),
-    [controlsPresence]
-  )
-
-  const project = useSetAtom(projectUserAvatarPropsAtom(avatarId))
-  const setBezelAngle = useSetAtom(setUserAvatarBezelAngleAtom(avatarId))
-  const setImageStatus = useSetAtom(setUserAvatarImageStatusAtom(avatarId))
-  const setImageTone = useSetAtom(setUserAvatarImageToneAtom(avatarId))
-
-  // Layout effect: the projection must land before children read the store
-  // in the same commit. Primitive deps, so no loop guard is needed here.
-  React.useLayoutEffect(() => {
-    project(config, presenceProp)
-  }, [project, config, presenceProp])
-
-  // A generated key belongs to this mount only; a given `avatarId` is the
-  // app's handle and outlives it.
-  React.useEffect(() => {
-    if (options.avatarId !== undefined) return
-    return () => removeUserAvatarInstance(avatarId)
-  }, [options.avatarId, avatarId])
-
-  const presence = useAtomValue(userAvatarPresenceAtom(avatarId))
-  const bezelAngle = useAtomValue(userAvatarBezelAngleAtom(avatarId))
-  const imageStatus = useAtomValue(userAvatarImageStatusAtom(avatarId))
-  const imageTone = useAtomValue(userAvatarImageToneAtom(avatarId))
-
-  const ref = React.useRef<HTMLElement | null>(null)
-  const reduce = useReducedMotion()
-
-  // Pointer → bearing. Coalesced to one write per animation frame, and only
-  // when the angle moved enough to matter, so a room full of avatars is
-  // still one cheap listener each and near-zero store traffic while idle.
-  React.useEffect(() => {
-    if (!bezel || reduce || typeof window === "undefined") return
-    let frame = 0
-    let last = Number.NaN
-    let pointer: { x: number; y: number } | null = null
-
-    const flush = () => {
-      frame = 0
-      const host = ref.current
-      if (!host || !pointer) return
-      const rect = host.getBoundingClientRect()
-      if (rect.width === 0) return
-      const dx = pointer.x - (rect.left + rect.width / 2)
-      const dy = pointer.y - (rect.top + rect.height / 2)
-      // atan2 measures from 3 o'clock anticlockwise-positive in screen
-      // space; rotate so 0 is 12 o'clock and clockwise grows.
-      const bearing = ((Math.atan2(dy, dx) * 180) / Math.PI + 90 + 360) % 360
-      // Unwrap: step from the last value by the shortest arc, so the stored
-      // angle is continuous and the rim never spins the long way round.
-      let angle = bearing
-      if (!Number.isNaN(last)) {
-        let delta = bearing - (((last % 360) + 360) % 360)
-        if (delta > 180) delta -= 360
-        if (delta < -180) delta += 360
-        if (Math.abs(delta) < ANGLE_EPSILON) return
-        angle = last + delta
-      }
-      last = angle
-      setBezelAngle(angle)
-    }
-    const onMove = (event: PointerEvent) => {
-      pointer = { x: event.clientX, y: event.clientY }
-      if (frame === 0) frame = window.requestAnimationFrame(flush)
-    }
-
-    window.addEventListener("pointermove", onMove, { passive: true })
-    return () => {
-      window.removeEventListener("pointermove", onMove)
-      if (frame !== 0) window.cancelAnimationFrame(frame)
-    }
-  }, [bezel, reduce, setBezelAngle])
-
-  // No image, no status: keep the store honest when `src` goes away.
-  React.useEffect(() => {
-    if (!hasImage) setImageStatus("idle")
-  }, [hasImage, setImageStatus])
-
-  // Once the image is on screen, read how light its rim is so the bezel's
-  // highlight and shadow can be weighted against it. Cleared whenever the
-  // image changes or goes away — a stale tone from the previous photo would
-  // light the new one wrong for a frame. Sampling is async (a second, CORS
-  // clean decode of the same URL, memoised per src); the cancelled flag
-  // keeps a slow sample from landing on a later src.
-  React.useEffect(() => {
-    setImageTone(null)
-    if (!bezel || !hasImage || !src || imageStatus !== "loaded") return
-    let cancelled = false
-    void measureRimTone(src).then((tone) => {
-      if (!cancelled) setImageTone(tone)
-    })
-    return () => {
-      cancelled = true
-    }
-  }, [bezel, hasImage, src, imageStatus, setImageTone])
-
-  return {
-    avatarId,
-    presence,
-    bezelAngle,
-    imageStatus,
-    imageTone,
-    setImageStatus,
-    ref,
-  }
-}

package/src/components/user-avatar/user-avatar-atom.ts

@@ -1,218 +0,0 @@
-/**
- * User avatar state — Jotai atom families keyed by an avatar id.
- *
- * Follows the tree's layout (`components/composed/tree/tree-atom.ts`): one
- * in-house `keyed()` family per field, write-only action atoms for every
- * mutation, a composed read-only state atom, and `removeUserAvatarInstance`
- * to drop an id from every family. Nothing here touches the DOM — the
- * pointer maths that feeds `bezelAngle` lives in `use-user-avatar.ts`.
- */
-
-import { atom } from "jotai"
-import type { Getter, Setter } from "jotai"
-
-import type {
-  ImageStatus,
-  UserAvatarConfig,
-  UserAvatarInstanceId,
-  UserAvatarState,
-  UserPresence,
-} from "./type"
-
-/** Light from the top-left, the classic emboss, until a pointer moves. */
-export const DEFAULT_BEZEL_ANGLE = 315
-
-const DEFAULT_CONFIG: UserAvatarConfig = { controlsPresence: false }
-
-// ── families ───────────────────────────────────────────────────────────────
-
-type Family<AtomType> = ((id: UserAvatarInstanceId) => AtomType) & {
-  remove: (id: UserAvatarInstanceId) => void
-}
-
-const families: { remove: (id: UserAvatarInstanceId) => void }[] = []
-
-function keyed<AtomType>(create: (id: UserAvatarInstanceId) => AtomType) {
-  const cache = new Map<UserAvatarInstanceId, AtomType>()
-  const family = ((id: UserAvatarInstanceId) => {
-    let instance = cache.get(id)
-    if (instance === undefined) {
-      instance = create(id)
-      cache.set(id, instance)
-    }
-    return instance
-  }) as Family<AtomType>
-  family.remove = (id: UserAvatarInstanceId) => {
-    cache.delete(id)
-  }
-  families.push(family)
-  return family
-}
-
-function stateFamily<Value>(name: string, initialValue: Value) {
-  return keyed((id) => {
-    const instance = atom(initialValue)
-    instance.debugLabel = `userAvatar/${id}/${name}`
-    return instance
-  })
-}
-
-function readFamily<Value>(
-  name: string,
-  read: (get: Getter, id: UserAvatarInstanceId) => Value
-) {
-  return keyed((id) => {
-    const instance = atom((get) => read(get, id))
-    instance.debugLabel = `userAvatar/${id}/${name}`
-    return instance
-  })
-}
-
-function actionFamily<Args extends unknown[]>(
-  name: string,
-  write: (
-    get: Getter,
-    set: Setter,
-    id: UserAvatarInstanceId,
-    ...args: Args
-  ) => void
-) {
-  return keyed((id) => {
-    const instance = atom(null, (get, set, ...args: Args) =>
-      write(get, set, id, ...args)
-    )
-    instance.debugLabel = `userAvatar/${id}/${name}`
-    return instance
-  })
-}
-
-// ── primitives ─────────────────────────────────────────────────────────────
-
-/** `null` = no badge. */
-export const userAvatarPresenceAtom = stateFamily<UserPresence | null>(
-  "presence",
-  null
-)
-
-/** Degrees clockwise from 12 o'clock — where the bezel highlight sits. */
-export const userAvatarBezelAngleAtom = stateFamily<number>(
-  "bezelAngle",
-  DEFAULT_BEZEL_ANGLE
-)
-
-export const userAvatarImageStatusAtom = stateFamily<ImageStatus>(
-  "imageStatus",
-  "idle"
-)
-
-/** Rim lightness of the loaded image, `null` until sampled (or unsampleable). */
-export const userAvatarImageToneAtom = stateFamily<number | null>(
-  "imageTone",
-  null
-)
-
-/** @internal Which fields the mounted component controls from props. */
-export const userAvatarConfigAtom = stateFamily<UserAvatarConfig>(
-  "config",
-  DEFAULT_CONFIG
-)
-
-// ── derived ────────────────────────────────────────────────────────────────
-
-export const userAvatarIsOnlineAtom = readFamily(
-  "isOnline",
-  (get, id) => get(userAvatarPresenceAtom(id)) === "online"
-)
-
-/** Whole-state read for callers that want the object; field atoms above are
- * cheaper for components that watch one thing. */
-export const userAvatarStateAtom = readFamily<UserAvatarState>(
-  "state",
-  (get, id) => ({
-    presence: get(userAvatarPresenceAtom(id)),
-    bezelAngle: get(userAvatarBezelAngleAtom(id)),
-    imageStatus: get(userAvatarImageStatusAtom(id)),
-    imageTone: get(userAvatarImageToneAtom(id)),
-  })
-)
-
-// ── actions ────────────────────────────────────────────────────────────────
-
-/** Inert while a `presence` prop controls the avatar — the prop is truth. */
-export const setUserAvatarPresenceAtom = actionFamily<
-  [presence: UserPresence | null]
->("setPresence", (get, set, id, presence) => {
-  if (get(userAvatarConfigAtom(id)).controlsPresence) return
-  set(userAvatarPresenceAtom(id), presence)
-})
-
-/** online ⇄ offline; a badge-less avatar comes online. */
-export const toggleUserAvatarPresenceAtom = actionFamily<[]>(
-  "togglePresence",
-  (get, set, id) => {
-    const next = get(userAvatarPresenceAtom(id)) === "online" ? "offline" : "online"
-    set(setUserAvatarPresenceAtom(id), next)
-  }
-)
-
-/** Stored as given — continuous, not wrapped into [0, 360): the rim is
- * rotated with a CSS transition, and an unwrapped angle is what lets a
- * 359° → 1° move take the short way round. Written on every pointer frame,
- * so it stays a bare set — no config gate, no side effects. */
-export const setUserAvatarBezelAngleAtom = actionFamily<[angle: number]>(
-  "setBezelAngle",
-  (_get, set, id, angle) => {
-    if (!Number.isFinite(angle)) return
-    set(userAvatarBezelAngleAtom(id), angle)
-  }
-)
-
-/** @internal Reported by the image element; drives the skeleton. */
-export const setUserAvatarImageStatusAtom = actionFamily<[status: ImageStatus]>(
-  "setImageStatus",
-  (_get, set, id, status) => {
-    set(userAvatarImageStatusAtom(id), status)
-  }
-)
-
-/** @internal Written by the hook once the loaded image has been sampled;
- * cleared (null) when the image changes or goes away. Clamped to [0, 1]. */
-export const setUserAvatarImageToneAtom = actionFamily<[tone: number | null]>(
-  "setImageTone",
-  (_get, set, id, tone) => {
-    set(
-      userAvatarImageToneAtom(id),
-      tone === null || !Number.isFinite(tone) ? null : Math.min(1, Math.max(0, tone))
-    )
-  }
-)
-
-/** @internal Projection of the mounted component's controlled props. */
-export const projectUserAvatarPropsAtom = actionFamily<
-  [config: UserAvatarConfig, presence: UserPresence | null | undefined]
->("projectProps", (get, set, id, config, presence) => {
-  const wasControlled = get(userAvatarConfigAtom(id)).controlsPresence
-  set(userAvatarConfigAtom(id), config)
-  if (config.controlsPresence) set(userAvatarPresenceAtom(id), presence ?? null)
-  // Releasing control (`presence` prop → undefined) clears the badge rather
-  // than leaving the last projected value stranded in the store — going
-  // from "online" to no presence is a real transition for a user object.
-  else if (wasControlled) set(userAvatarPresenceAtom(id), null)
-})
-
-export const resetUserAvatarAtom = actionFamily<[]>(
-  "reset",
-  (_get, set, id) => {
-    set(userAvatarPresenceAtom(id), null)
-    set(userAvatarBezelAngleAtom(id), DEFAULT_BEZEL_ANGLE)
-    set(userAvatarImageStatusAtom(id), "idle")
-    set(userAvatarImageToneAtom(id), null)
-    set(userAvatarConfigAtom(id), DEFAULT_CONFIG)
-  }
-)
-
-/** Forget an avatar entirely — every family drops the key so the store can
- * release its state. Call on teardown of a named instance. */
-export function removeUserAvatarInstance(id: UserAvatarInstanceId): void {
-  for (const family of families) family.remove(id)
-}

package/src/components/user-avatar/utils.ts

@@ -1,102 +0,0 @@
-/** "Jenny Hamilton" → "JH", "luna" → "L". */
-export function initialsFrom(name: string): string {
-  const parts = name.trim().split(/\s+/).filter(Boolean)
-  if (parts.length === 0) return ""
-  const first = parts[0]?.[0] ?? ""
-  const last = parts.length > 1 ? (parts.at(-1)?.[0] ?? "") : ""
-  return (first + last).toUpperCase()
-}
-
-/** Sampling grid for `measureRimTone`. 16² px is enough to average a rim. */
-const TONE_SAMPLE_SIZE = 16
-/** Pixels this far (in radii) from the centre count as rim — the band the
- * bezel sits on. Matches the ring's mask, which fades in from ~78%. */
-const TONE_RIM_RADIUS = 0.6
-
-const toneCache = new Map<string, Promise<number | null>>()
-
-/**
- * Average perceived lightness, 0 (black) → 1 (white), of an image's outer
- * band — the pixels the bezel ring overlays — or `null` when it cannot be
- * measured: no DOM/canvas (SSR, test DOM), a decode failure, or a host
- * without CORS headers (the sample needs a CORS-clean image; the avatar's
- * own `<img>` is left untouched, so a non-CORS host still displays).
- * Results are memoised per `src`, so a room of the same face samples once.
- */
-export function measureRimTone(src: string): Promise<number | null> {
-  const cached = toneCache.get(src)
-  if (cached) return cached
-  const promise = new Promise<number | null>((resolve) => {
-    if (typeof document === "undefined" || typeof Image === "undefined") {
-      resolve(null)
-      return
-    }
-    const image = new Image()
-    image.crossOrigin = "anonymous"
-    image.decoding = "async"
-    image.onerror = () => resolve(null)
-    image.onload = () => {
-      try {
-        const size = TONE_SAMPLE_SIZE
-        const canvas = document.createElement("canvas")
-        canvas.width = size
-        canvas.height = size
-        const context = canvas.getContext("2d", { willReadFrequently: true })
-        if (!context) {
-          resolve(null)
-          return
-        }
-        context.drawImage(image, 0, 0, size, size)
-        const { data } = context.getImageData(0, 0, size, size)
-        const centre = (size - 1) / 2
-        const rim = TONE_RIM_RADIUS * centre
-        let sum = 0
-        let count = 0
-        for (let y = 0; y < size; y++) {
-          for (let x = 0; x < size; x++) {
-            const dx = x - centre
-            const dy = y - centre
-            if (dx * dx + dy * dy < rim * rim) continue
-            const offset = (y * size + x) * 4
-            const r = data[offset] ?? 0
-            const g = data[offset + 1] ?? 0
-            const b = data[offset + 2] ?? 0
-            // Rec. 709 luma on the gamma-encoded channels: close enough to
-            // perceived lightness for a "light or dark?" verdict.
-            sum += (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255
-            count++
-          }
-        }
-        resolve(count === 0 ? null : sum / count)
-      } catch {
-        // A tainted canvas throws on getImageData.
-        resolve(null)
-      }
-    }
-    image.src = src
-  })
-  toneCache.set(src, promise)
-  // Only a real reading is worth keeping — a failed sample (flaky network,
-  // a host that gained CORS headers later) gets another go next mount.
-  void promise.then((tone) => {
-    if (tone === null) toneCache.delete(src)
-  })
-  return promise
-}
-
-/**
- * Bezel highlight/shadow alphas for an image whose rim lightness is `tone`
- * (0 → 1). Against a dark rim the white highlight is eased off (it glares)
- * and the black shadow pushed up (it has to darken mid-tones to register);
- * against a pale rim the reverse — the highlight can be full (it barely
- * shows) and the shadow is what carries the emboss, so it sits lighter.
- * Linear between; the end points are tuned by eye on a dark and a light
- * photo in both themes.
- */
-export function bezelAlphasForTone(tone: number): { hi: number; lo: number } {
-  const t = Math.min(1, Math.max(0, tone))
-  return {
-    hi: 0.7 + 0.3 * t,
-    lo: 0.6 - 0.4 * t,
-  }
-}