@datalayer/agent-runtimes 1.3.30 → 1.3.32

package/lib/chat/ChatFloating.js

@@ -48,6 +48,13 @@ function useIsMobile(breakpoint = 640) {
     }, [breakpoint]);
     return isMobile;
 }
+/**
+ * A length in pixels, as a string: a number in `sx` from 0 to 12 is read as
+ * the theme's space scale (`left: 8` is 64px).
+ */
+const px = (value) => `${Math.round(value)}px`;
+/** Kept between 8px from the window's start and `max`. */
+const clamp = (value, max) => Math.max(8, Math.min(value, Math.max(8, max)));
 /**
  * ChatFloating component
  * A floating chat window built on ChatBase
@@ -141,7 +148,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         }
     }, [isOpen, saying]);
     const stageRef = useRef(null);
-    const stageDrag = useViewportDrag(stageRef);
+    const stageDrag = useViewportDrag(stageRef, { whole: true });
     useEffect(() => {
         if (!assistantShown) {
             return;
@@ -387,9 +394,28 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
         const widthPx = typeof width === 'number' ? width : 400;
         const heightPx = typeof height === 'number' ? height : 550;
         if (stageDrag.position) {
+            // Toward the page's inside: above the character, below it, or beside
+            // it when the window is too short for either.
+            const { left, top } = stageDrag.position;
+            const onLeft = left + ASSISTANT_SIZE / 2 < window.innerWidth / 2;
+            const above = top - heightPx - 16;
+            const below = top + ASSISTANT_SIZE + 16;
+            const beside = above < 8 && below + heightPx > window.innerHeight - 8;
+            const x = beside
+                ? onLeft
+                    ? left + ASSISTANT_SIZE + 16
+                    : left - widthPx - 16
+                : onLeft
+                    ? left
+                    : left + ASSISTANT_SIZE - widthPx;
+            const y = beside
+                ? top + ASSISTANT_SIZE - heightPx
+                : above >= 8
+                    ? above
+                    : below;
             return {
-                left: Math.max(8, stageDrag.position.left + ASSISTANT_SIZE - widthPx),
-                top: Math.max(8, stageDrag.position.top - heightPx - 16),
+                left: px(clamp(x, window.innerWidth - widthPx - 8)),
+                top: px(clamp(y, window.innerHeight - heightPx - 8)),
                 right: 'auto',
                 bottom: 'auto',
             };
@@ -557,8 +583,8 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
             ...(viewMode === 'floating-draggable' && !isMobile
                 ? drag.position
                     ? {
-                        left: drag.position.left,
-                        top: drag.position.top,
+                        left: px(drag.position.left),
+                        top: px(drag.position.top),
                         right: 'auto',
                         bottom: 'auto',
                     }
@@ -694,7 +720,10 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
      * person's attention, until the chat is opened; hovered, they show in a
      * balloon above it in place of the tooltip.
      */
-    const chatButton = (_jsx(IconButton, { icon: buttonIcon ? buttonIcon : CommentDiscussionIcon, "aria-label": buttonTooltip, onClick: assistantMode && assistantAway === 'page'
+    const chatButton = (_jsx(IconButton, { icon: buttonIcon ? buttonIcon : CommentDiscussionIcon, "aria-label": buttonTooltip, 
+        // With words to say, the balloon stands in for the tooltip: Primer's
+        // own would cover it.
+        unsafeDisableTooltip: !!saying, onClick: assistantMode && assistantAway === 'page'
             ? callAssistantBack
             : handleToggle, size: "large", sx: {
             width: 56,
@@ -729,8 +758,11 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
             },
         } }));
     return (_jsxs(_Fragment, { children: [assistantShown && (_jsx(AssistantStage, { character: assistantCharacter, state: assistantState, size: ASSISTANT_SIZE, place: stageDrag.position
-                    ? { left: stageDrag.position.left, top: stageDrag.position.top }
-                    : getPositionStyles(), stageRef: stageRef, onDragStart: stageDrag.onHandlePointerDown, open: isOpen, onToggle: handleToggle, balloon: assistantBalloon, insist: balloonInsists, onDismiss: dismissAssistant })), showButton && !isOpen && !assistantShown && (_jsx(Box, { sx: {
+                    ? {
+                        left: px(stageDrag.position.left),
+                        top: px(stageDrag.position.top),
+                    }
+                    : getPositionStyles(), stageRef: stageRef, onDragStart: stageDrag.onHandlePointerDown, open: isOpen, onToggle: handleToggle, balloon: assistantBalloon, insist: balloonInsists, onDismiss: dismissAssistant, ownRef: popupRef })), showButton && !isOpen && !assistantShown && (_jsx(Box, { sx: {
                     ...getPositionStyles(),
                 }, children: _jsxs(Box, { sx: {
                         position: 'relative',

package/lib/chat/assistant/AssistantStage.d.ts

@@ -3,7 +3,10 @@
  * a corner, acting out what the application is doing, with a balloon that
  * says a word while the conversation is closed. Clicked, it opens the
  * conversation; dragged, it moves, and the conversation follows; sent away,
- * it says goodbye and leaves a small way back.
+ * it says goodbye and leaves a small way back. It never sits over an open
+ * dialog, an overlay or another chat's composer, nor where the pointer is
+ * working: it steps aside — out of sight and out of the pointer's way — until
+ * the place is clear again.
  *
  * Its motions are one set for every character, by the parts each drawing
  * names (`assistant-body`, `-pupils`, `-lids`, `-mouth`), and nothing moves
@@ -14,7 +17,7 @@
 import type { JSX, RefObject } from 'react';
 import { type AssistantCharacter } from './characters';
 import type { AssistantCharacterData } from './formats/types';
-import type { AssistantAway, AssistantState } from './state';
+import { type AssistantAway, type AssistantState } from './state';
 /**
  * Where the balloon goes so that it stays inside the window (T-23): toward
  * the middle of the page from whichever half the character stands in, and
@@ -32,6 +35,20 @@ export declare function balloonSide(place: {
     side: 'above' | 'below';
     align: 'left' | 'right';
 };
+/** Why the assistant has stepped aside, if it has (T-27). */
+export type AssistantAside = 'obstacle' | 'pointer' | undefined;
+/**
+ * Whether the assistant steps aside (T-27): while an open dialog, an overlay
+ * or another chat's composer is under it (`obstacle`), and while the pointer
+ * works over or beside it — pressing, or dragging — until it has been away for
+ * `POINTER_CALM_MS` (`pointer`). Its own conversation, `own`, is neither, and
+ * nothing counts while `paused` (its own menu is open).
+ *
+ * The page is looked over on a short timer rather than watched: a dialog
+ * opens, a composer scrolls or a chat is dragged under it without a mutation
+ * this could hear, and a few rectangles every 400ms cost nothing.
+ */
+export declare function useKeepClear(stageRef: RefObject<HTMLElement | null>, own: RefObject<HTMLElement | null> | undefined, paused: boolean): AssistantAside;
 export interface AssistantStageProps {
     /** The character: one Datalayer ships, by id (T-25), or one loaded from a file (T-26). */
     character: string | AssistantCharacter | AssistantCharacterData;
@@ -40,10 +57,7 @@ export interface AssistantStageProps {
     /** Its size, in pixels. */
     size?: number;
     /** Where it sits once moved, or the corner it starts in. */
-    place: {
-        left: number;
-        top: number;
-    } | React.CSSProperties;
+    place: React.CSSProperties;
     /** The element the drag measures. */
     stageRef: RefObject<HTMLDivElement | null>;
     /** Starts a drag. */
@@ -65,6 +79,11 @@ export interface AssistantStageProps {
     insist?: boolean;
     /** Send it away (T-27): for the page, for the session, or for good. */
     onDismiss: (away: AssistantAway) => void;
+    /**
+     * Its own conversation's window: a dialog or composer there is not one it
+     * steps aside for, nor is the pointer working there (T-27).
+     */
+    ownRef?: RefObject<HTMLElement | null>;
 }
-export declare function AssistantStage({ character, state, size, place, stageRef, onDragStart, open, onToggle, balloon, insist, onDismiss, }: AssistantStageProps): JSX.Element;
+export declare function AssistantStage({ character, state, size, place, stageRef, onDragStart, open, onToggle, balloon, insist, onDismiss, ownRef, }: AssistantStageProps): JSX.Element;
 export default AssistantStage;

package/lib/chat/assistant/AssistantStage.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useState } from 'react';
-import { ActionList, ActionMenu, IconButton } from '@primer/react';
+import { useEffect, useRef, useState } from 'react';
+import { ActionList, ActionMenu, IconButton, useTheme } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { XIcon } from '@primer/octicons-react';
 import { assistantCharacter } from './characters';
 import { SpeechBalloon } from './SpeechBalloon';
 import { SpriteCharacter } from './SpriteCharacter';
+import { ASSISTANT_OBSTACLES, POINTER_CALM_MS, boxesMeet, pointerNear, } from './state';
 /** The motions, by the state the stage is in. */
 const MOTIONS = {
     '@keyframes assistantFloat': {
@@ -54,6 +55,14 @@ const AWAY_CHOICES = [
 ];
 /** Room the balloon needs above the character before it goes below. */
 const BALLOON_ROOM = 200;
+/** A place's length in pixels, given as a number or as `"<n>px"`. */
+function pixels(value) {
+    if (typeof value === 'number') {
+        return value;
+    }
+    const match = typeof value === 'string' ? /^(-?\d+(?:\.\d+)?)px$/.exec(value) : null;
+    return match ? Number(match[1]) : undefined;
+}
 /**
  * Where the balloon goes so that it stays inside the window (T-23): toward
  * the middle of the page from whichever half the character stands in, and
@@ -63,8 +72,8 @@ export function balloonSide(place, viewport = {
     width: typeof window === 'undefined' ? 1280 : window.innerWidth,
     height: typeof window === 'undefined' ? 800 : window.innerHeight,
 }) {
-    const left = typeof place.left === 'number' ? place.left : undefined;
-    const top = typeof place.top === 'number' ? place.top : undefined;
+    const left = pixels(place.left);
+    const top = pixels(place.top);
     const align = left !== undefined
         ? left < viewport.width / 2
             ? 'left'
@@ -81,7 +90,93 @@ export function balloonSide(place, viewport = {
             : 'above';
     return { side, align };
 }
-export function AssistantStage({ character, state, size = 88, place, stageRef, onDragStart, open, onToggle, balloon, insist = false, onDismiss, }) {
+/** How often the page is looked over for what the assistant must not cover. */
+const CLEAR_CHECK_MS = 400;
+/**
+ * Whether the assistant steps aside (T-27): while an open dialog, an overlay
+ * or another chat's composer is under it (`obstacle`), and while the pointer
+ * works over or beside it — pressing, or dragging — until it has been away for
+ * `POINTER_CALM_MS` (`pointer`). Its own conversation, `own`, is neither, and
+ * nothing counts while `paused` (its own menu is open).
+ *
+ * The page is looked over on a short timer rather than watched: a dialog
+ * opens, a composer scrolls or a chat is dragged under it without a mutation
+ * this could hear, and a few rectangles every 400ms cost nothing.
+ */
+export function useKeepClear(stageRef, own, paused) {
+    const [obstructed, setObstructed] = useState(false);
+    const [pointerBusy, setPointerBusy] = useState(false);
+    useEffect(() => {
+        if (paused) {
+            setObstructed(false);
+            return;
+        }
+        const check = () => {
+            const stage = stageRef.current;
+            if (!stage) {
+                return;
+            }
+            const box = stage.getBoundingClientRect();
+            const mine = own?.current;
+            const hit = Array.from(document.querySelectorAll(ASSISTANT_OBSTACLES)).some(element => {
+                if (stage.contains(element) ||
+                    element.contains(stage) ||
+                    mine?.contains(element)) {
+                    return false;
+                }
+                const other = element.getBoundingClientRect();
+                return other.width > 0 && other.height > 0 && boxesMeet(box, other);
+            });
+            setObstructed(hit);
+        };
+        check();
+        const timer = window.setInterval(check, CLEAR_CHECK_MS);
+        return () => window.clearInterval(timer);
+    }, [stageRef, own, paused]);
+    useEffect(() => {
+        if (paused) {
+            setPointerBusy(false);
+            return;
+        }
+        let calm;
+        let aside = false;
+        const onPointer = (event) => {
+            const stage = stageRef.current;
+            const target = event.target;
+            if (!stage ||
+                (target && (stage.contains(target) || own?.current?.contains(target)))) {
+                return;
+            }
+            // A pointer passing by is not working; once aside, any move near keeps
+            // it aside, so it does not come back under a pointer still there.
+            if (event.type === 'pointermove' && event.buttons === 0 && !aside) {
+                return;
+            }
+            if (!pointerNear(stage.getBoundingClientRect(), {
+                x: event.clientX,
+                y: event.clientY,
+            })) {
+                return;
+            }
+            aside = true;
+            setPointerBusy(true);
+            clearTimeout(calm);
+            calm = setTimeout(() => {
+                aside = false;
+                setPointerBusy(false);
+            }, POINTER_CALM_MS);
+        };
+        document.addEventListener('pointerdown', onPointer, true);
+        document.addEventListener('pointermove', onPointer, true);
+        return () => {
+            clearTimeout(calm);
+            document.removeEventListener('pointerdown', onPointer, true);
+            document.removeEventListener('pointermove', onPointer, true);
+        };
+    }, [stageRef, own, paused]);
+    return obstructed ? 'obstacle' : pointerBusy ? 'pointer' : undefined;
+}
+export function AssistantStage({ character, state, size = 88, place, stageRef, onDragStart, open, onToggle, balloon, insist = false, onDismiss, ownRef, }) {
     // A shipped one by id, a drawing contributed by a plugin (T-24), or a
     // character read from a file (T-26).
     const shipped = typeof character === 'string'
@@ -92,17 +187,29 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
     const name = shipped
         ? shipped.name
         : character.name;
+    // Drawn for the chat's colour mode: the dark drawing on a dark page (T-25).
+    const { colorScheme } = useTheme();
+    const colorMode = colorScheme?.startsWith('dark') ? 'dark' : 'light';
     const [hovered, setHovered] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
     // Where the press began: a press that moves is a drag, not a click.
     const pressedAt = useRef(null);
-    const showBalloon = !open && !!balloon && (hovered || insist);
-    return (_jsxs(Box, { ref: stageRef, "data-assistant-state": state, sx: {
+    const aside = useKeepClear(stageRef, ownRef, menuOpen);
+    const showBalloon = !aside && !open && !!balloon && (hovered || insist);
+    return (_jsxs(Box, { ref: stageRef, "data-assistant-state": state, "data-assistant-aside": aside, sx: {
             position: 'fixed',
             zIndex: 1002,
             ...place,
             width: size,
             height: size,
+            // Aside (T-27): out of sight, out of the tab order and let through
+            // to what is under it; back as soon as the place is clear.
+            opacity: aside ? 0 : 1,
+            visibility: aside ? 'hidden' : 'visible',
+            pointerEvents: aside ? 'none' : undefined,
+            transition: aside
+                ? 'opacity 150ms ease, visibility 0s linear 150ms'
+                : 'opacity 150ms ease',
             ...MOTIONS,
             '& .assistant-lids ellipse': {
                 transformBox: 'fill-box',
@@ -183,7 +290,7 @@ export function AssistantStage({ character, state, size = 88, place, stageRef, o
                         outlineOffset: 2,
                         borderRadius: '50%',
                     },
-                }, children: shipped ? (_jsx(shipped.Drawing, { size: size })) : (_jsx(SpriteCharacter, { character: character, state: state, size: size })) }), (hovered || menuOpen) && state !== 'goodbye' && (_jsx(Box, { sx: { position: 'absolute', top: -6, right: -6 }, children: _jsxs(ActionMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: XIcon, "aria-label": `Send ${name} away`, size: "small", variant: "invisible", "data-assistant-dismiss": "", sx: {
+                }, children: shipped ? (_jsx(shipped.Drawing, { size: size, mode: colorMode })) : (_jsx(SpriteCharacter, { character: character, state: state, size: size })) }), (hovered || menuOpen) && !aside && state !== 'goodbye' && (_jsx(Box, { sx: { position: 'absolute', top: '-6px', right: '-6px' }, children: _jsxs(ActionMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: XIcon, "aria-label": `Send ${name} away`, size: "small", variant: "invisible", "data-assistant-dismiss": "", sx: {
                                     bg: 'canvas.default',
                                     borderRadius: '50%',
                                     boxShadow: 'shadow.small',

package/lib/chat/assistant/SpeechBalloon.js

@@ -4,7 +4,11 @@ import { Box } from '@datalayer/primer-addons';
 export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above', align, tailAt, }) {
     return (_jsxs(Box, { role: "status", "aria-live": "polite", "data-speech-balloon": "", sx: {
             position: 'absolute',
-            ...(side === 'above' ? { bottom: above } : { top: above }),
+            // Pixels, as strings: a number here is read as the theme's space
+            // scale (`-7` would be `-space[7]`, 48px).
+            ...(side === 'above'
+                ? { bottom: `${above}px` }
+                : { top: `${above}px` }),
             [align]: 0,
             maxWidth: 280,
             width: 'max-content',
@@ -22,8 +26,8 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
             '&::after': {
                 content: '""',
                 position: 'absolute',
-                ...(side === 'above' ? { bottom: -7 } : { top: -7 }),
-                [align]: tailAt - 6,
+                ...(side === 'above' ? { bottom: '-7px' } : { top: '-7px' }),
+                [align]: `${tailAt - 6}px`,
                 width: 12,
                 height: 12,
                 bg: 'canvas.default',

package/lib/chat/assistant/characters.d.ts

@@ -9,18 +9,49 @@
  * state — `assistant-body`, `assistant-pupils`, `assistant-lids`,
  * `assistant-mouth` — so one set of motions serves every character.
  *
+ * Each is drawn twice, for the chat's colour mode: a light drawing for the
+ * light page and a dark one for the `loop` theme's dark page, by its dark
+ * tokens (`loopColors.inkDark`, `grayDark`, `black`). Their edges and eyes
+ * are held to 3 to 1 against both pages by a test (`keyColours`).
+ *
  * @module chat/assistant/characters
  */
 import type { JSX } from 'react';
+/** The colour mode a character is drawn for: the chat's own. */
+export type AssistantColorMode = 'light' | 'dark';
+/**
+ * What a drawing must keep readable, by mode (T-25, tested as T-15 tests the
+ * faces): the colours that meet the page along its edge, and its eyes.
+ */
+export interface AssistantCharacterKeyColours {
+    /** Every colour drawn along the character's edge, where it meets the page. */
+    edges: string[];
+    eye: {
+        /** The white of the eye. */
+        white: string;
+        /** The ring drawn round it. */
+        ring: string;
+        /** The pupil. */
+        pupil: string;
+        /** What the eye sits on: the page, or the face's colour. */
+        on: 'page' | string;
+    };
+}
 /** A character Datalayer ships. */
 export interface AssistantCharacter {
     id: string;
     /** Its name, as the picker shows it. */
     name: string;
-    /** The drawing, at the size asked; its parts animate by class. */
+    /**
+     * The drawing, at the size asked, for the chat's colour mode (light when
+     * unsaid); its parts animate by class.
+     */
     Drawing: (props: {
         size: number;
+        mode?: AssistantColorMode;
     }) => JSX.Element;
+    /** Its key colours in each mode, for the contrast test (T-25). */
+    keyColours?: Record<AssistantColorMode, AssistantCharacterKeyColours>;
 }
 /** The characters Datalayer ships, in the order a picker shows them. */
 export declare const ASSISTANT_CHARACTERS: readonly AssistantCharacter[];

package/lib/chat/assistant/characters.js

@@ -1,33 +1,198 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const INK = '#1D1D1F';
+import { loopColors } from '@datalayer/primer-addons/lib/theme';
+const INK = loopColors.ink;
+const INK_DARK = loopColors.inkDark;
 /** Two eyes with lids that blink and pupils that look about. */
-function Eyes({ cx, cy, gap, r, }) {
+function Eyes({ cx, cy, gap, r, colours, }) {
     const left = cx - gap / 2;
     const right = cx + gap / 2;
-    return (_jsxs("g", { children: [_jsx("circle", { cx: left, cy: cy, r: r, fill: "#FFFFFF", stroke: INK, strokeWidth: 1.5 }), _jsx("circle", { cx: right, cy: cy, r: r, fill: "#FFFFFF", stroke: INK, strokeWidth: 1.5 }), _jsxs("g", { className: "assistant-pupils", children: [_jsx("circle", { cx: left + r * 0.15, cy: cy + r * 0.1, r: r * 0.45, fill: INK }), _jsx("circle", { cx: right + r * 0.15, cy: cy + r * 0.1, r: r * 0.45, fill: INK }), _jsx("circle", { cx: left + r * 0.3, cy: cy - r * 0.1, r: r * 0.14, fill: "#FFFFFF" }), _jsx("circle", { cx: right + r * 0.3, cy: cy - r * 0.1, r: r * 0.14, fill: "#FFFFFF" })] }), _jsxs("g", { className: "assistant-lids", children: [_jsx("ellipse", { cx: left, cy: cy, rx: r + 0.5, ry: r + 0.5, fill: "currentColor" }), _jsx("ellipse", { cx: right, cy: cy, rx: r + 0.5, ry: r + 0.5, fill: "currentColor" })] })] }));
+    return (_jsxs("g", { children: [_jsx("circle", { cx: left, cy: cy, r: r, fill: colours.white, stroke: colours.ring, strokeWidth: 1.5 }), _jsx("circle", { cx: right, cy: cy, r: r, fill: colours.white, stroke: colours.ring, strokeWidth: 1.5 }), _jsxs("g", { className: "assistant-pupils", children: [_jsx("circle", { cx: left + r * 0.15, cy: cy + r * 0.1, r: r * 0.45, fill: colours.pupil }), _jsx("circle", { cx: right + r * 0.15, cy: cy + r * 0.1, r: r * 0.45, fill: colours.pupil }), _jsx("circle", { cx: left + r * 0.3, cy: cy - r * 0.1, r: r * 0.14, fill: colours.white }), _jsx("circle", { cx: right + r * 0.3, cy: cy - r * 0.1, r: r * 0.14, fill: colours.white })] }), _jsxs("g", { className: "assistant-lids", children: [_jsx("ellipse", { cx: left, cy: cy, rx: r + 0.5, ry: r + 0.5, fill: colours.lid }), _jsx("ellipse", { cx: right, cy: cy, rx: r + 0.5, ry: r + 0.5, fill: colours.lid })] })] }));
 }
+/**
+ * Each drawing's colours, light and dark. The dark ones are drawn for the
+ * `loop` theme's dark page (near-black, `loopColors.black`) and not the light
+ * drawing on black: lines that were ink turn to the dark mode's ink, the
+ * steel and the violets go lighter, outlines that a light page needs give
+ * way to the fill's own edge.
+ */
+const PAPER_CLIP = {
+    light: {
+        wire: '#7A808A',
+        shine: '#E3E6EB',
+        line: INK,
+        eye: { white: loopColors.white, ring: INK, pupil: INK, lid: '#B8BDC6' },
+    },
+    dark: {
+        wire: '#C9CED6',
+        shine: '#8D93A0',
+        line: INK_DARK,
+        eye: {
+            white: INK_DARK,
+            ring: loopColors.grayDark,
+            pupil: INK,
+            lid: '#8D93A0',
+        },
+    },
+};
+const WIZARD = {
+    light: {
+        hat: '#6E5CD6',
+        brim: '#4A3C9E',
+        robe: '#5B4BB7',
+        face: '#F2D3B3',
+        faceEdge: '#A0694A',
+        beard: '#F4F4F6',
+        beardEdge: '#7A808A',
+        star: '#F8D469',
+        eye: { white: loopColors.white, ring: INK, pupil: INK, lid: '#F2D3B3' },
+    },
+    dark: {
+        hat: '#9C88F0',
+        brim: '#7B67DB',
+        robe: '#8F7CE8',
+        face: '#E8C4A0',
+        faceEdge: '#E8C4A0',
+        beard: '#E4E4EA',
+        beardEdge: loopColors.grayDark,
+        star: '#F8D469',
+        eye: { white: INK_DARK, ring: INK, pupil: INK, lid: '#E8C4A0' },
+    },
+};
+const CAT = {
+    light: {
+        fur: '#F4A261',
+        edge: '#B4571A',
+        tail: '#E08A45',
+        ear: '#F6A5C1',
+        nose: '#B83A6B',
+        whiskers: INK,
+        eye: { white: loopColors.white, ring: INK, pupil: INK, lid: '#F4A261' },
+    },
+    dark: {
+        fur: '#F4A261',
+        edge: '#F4A261',
+        tail: '#E08A45',
+        ear: '#F6A5C1',
+        nose: '#B83A6B',
+        whiskers: INK_DARK,
+        eye: { white: INK_DARK, ring: INK, pupil: INK, lid: '#F4A261' },
+    },
+};
+const LOOP_EYES = {
+    light: {
+        eye: { white: loopColors.white, ring: INK, pupil: INK, lid: '#E3E6EB' },
+    },
+    dark: {
+        eye: {
+            white: INK_DARK,
+            ring: INK_DARK,
+            pupil: loopColors.black,
+            lid: loopColors.grayDark,
+        },
+    },
+};
 /** A paper clip of our own: a bent wire with eyes on its upper loop. */
-function PaperClip({ size }) {
-    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 96 96", role: "img", "aria-label": "Paper clip", style: { color: '#B8BDC6' }, children: _jsxs("g", { className: "assistant-body", children: [_jsx("path", { d: "M40 86 L40 30 Q40 14 52 14 Q64 14 64 30 L64 74 Q64 82 56 82 Q48 82 48 74 L48 36", fill: "none", stroke: "#9AA0AA", strokeWidth: 6, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M40 86 L40 30 Q40 14 52 14 Q64 14 64 30 L64 74 Q64 82 56 82 Q48 82 48 74 L48 36", fill: "none", stroke: "#E3E6EB", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M36 22 Q42 18 47 21", stroke: INK, strokeWidth: 2, fill: "none", strokeLinecap: "round" }), _jsx("path", { d: "M57 21 Q62 18 68 22", stroke: INK, strokeWidth: 2, fill: "none", strokeLinecap: "round" }), _jsx(Eyes, { cx: 52, cy: 30, gap: 16, r: 6.5 }), _jsx("path", { className: "assistant-mouth", d: "M48 44 Q52 47 56 44", stroke: INK, strokeWidth: 2, fill: "none", strokeLinecap: "round" })] }) }));
+function PaperClip({ size, mode = 'light', }) {
+    const c = PAPER_CLIP[mode];
+    const wire = 'M40 86 L40 30 Q40 14 52 14 Q64 14 64 30 L64 74 Q64 82 56 82 Q48 82 48 74 L48 36';
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 96 96", role: "img", "aria-label": "Paper clip", "data-assistant-mode": mode, children: _jsxs("g", { className: "assistant-body", children: [_jsx("path", { d: wire, fill: "none", stroke: c.wire, strokeWidth: 6, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: wire, fill: "none", stroke: c.shine, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M36 22 Q42 18 47 21", stroke: c.line, strokeWidth: 2, fill: "none", strokeLinecap: "round" }), _jsx("path", { d: "M57 21 Q62 18 68 22", stroke: c.line, strokeWidth: 2, fill: "none", strokeLinecap: "round" }), _jsx(Eyes, { cx: 52, cy: 30, gap: 16, r: 6.5, colours: c.eye }), _jsx("path", { className: "assistant-mouth", d: "M48 44 Q52 47 56 44", stroke: c.line, strokeWidth: 2, fill: "none", strokeLinecap: "round" })] }) }));
 }
 /** A wizard: a starred hat, a white beard, kind eyes. */
-function Wizard({ size }) {
-    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 96 96", role: "img", "aria-label": "Wizard", style: { color: '#F2D3B3' }, children: _jsxs("g", { className: "assistant-body", children: [_jsx("path", { d: "M24 92 Q48 58 72 92 Z", fill: "#5B4BB7" }), _jsx("circle", { cx: 48, cy: 48, r: 17, fill: "#F2D3B3" }), _jsx("path", { d: "M31 50 Q48 92 65 50 Q57 60 48 60 Q39 60 31 50 Z", fill: "#F4F4F6", stroke: "#D9DAE0", strokeWidth: 1 }), _jsx("path", { d: "M22 36 L48 2 L74 36 Q48 30 22 36 Z", fill: "#6E5CD6" }), _jsx("path", { d: "M20 37 Q48 29 76 37 Q48 43 20 37 Z", fill: "#4A3C9E" }), _jsx("path", { d: "M52 14 l2 4 4 1 -3 3 1 4 -4 -2 -4 2 1 -4 -3 -3 4 -1 Z", fill: "#F8D469" }), _jsx("circle", { cx: 40, cy: 26, r: 1.8, fill: "#F8D469" }), _jsx(Eyes, { cx: 48, cy: 46, gap: 13, r: 5 }), _jsx("path", { className: "assistant-mouth", d: "M44 58 Q48 61 52 58", stroke: INK, strokeWidth: 2, fill: "none", strokeLinecap: "round" })] }) }));
+function Wizard({ size, mode = 'light', }) {
+    const c = WIZARD[mode];
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 96 96", role: "img", "aria-label": "Wizard", "data-assistant-mode": mode, children: _jsxs("g", { className: "assistant-body", children: [_jsx("path", { d: "M24 92 Q48 58 72 92 Z", fill: c.robe }), _jsx("circle", { cx: 48, cy: 48, r: 17, fill: c.face, stroke: c.faceEdge, strokeWidth: 1.5 }), _jsx("path", { d: "M31 50 Q48 92 65 50 Q57 60 48 60 Q39 60 31 50 Z", fill: c.beard, stroke: c.beardEdge, strokeWidth: 1.2 }), _jsx("path", { d: "M22 36 L48 2 L74 36 Q48 30 22 36 Z", fill: c.hat }), _jsx("path", { d: "M20 37 Q48 29 76 37 Q48 43 20 37 Z", fill: c.brim }), _jsx("path", { d: "M52 14 l2 4 4 1 -3 3 1 4 -4 -2 -4 2 1 -4 -3 -3 4 -1 Z", fill: c.star }), _jsx("circle", { cx: 40, cy: 26, r: 1.8, fill: c.star }), _jsx(Eyes, { cx: 48, cy: 46, gap: 13, r: 5, colours: c.eye }), _jsx("path", { className: "assistant-mouth", d: "M44 58 Q48 61 52 58", stroke: INK, strokeWidth: 2, fill: "none", strokeLinecap: "round" })] }) }));
 }
 /** A cat: round, two ears, whiskers, a tail. */
-function Cat({ size }) {
-    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 96 96", role: "img", "aria-label": "Cat", style: { color: '#F4A261' }, children: _jsxs("g", { className: "assistant-body", children: [_jsx("path", { d: "M70 84 Q90 78 84 58", stroke: "#E08A45", strokeWidth: 6, fill: "none", strokeLinecap: "round" }), _jsx("ellipse", { cx: 48, cy: 78, rx: 24, ry: 14, fill: "#F4A261" }), _jsx("path", { d: "M24 30 L28 8 L42 22 Z", fill: "#F4A261" }), _jsx("path", { d: "M72 30 L68 8 L54 22 Z", fill: "#F4A261" }), _jsx("path", { d: "M28 26 L30 14 L38 22 Z", fill: "#F6A5C1" }), _jsx("path", { d: "M68 26 L66 14 L58 22 Z", fill: "#F6A5C1" }), _jsx("circle", { cx: 48, cy: 42, r: 24, fill: "#F4A261" }), _jsx(Eyes, { cx: 48, cy: 38, gap: 18, r: 6.5 }), _jsx("path", { d: "M45 48 L51 48 L48 52 Z", fill: "#B83A6B" }), _jsx("path", { className: "assistant-mouth", d: "M43 55 Q48 58 53 55", stroke: INK, strokeWidth: 2, fill: "none", strokeLinecap: "round" }), _jsx("path", { d: "M30 48 L18 46 M30 52 L18 54 M66 48 L78 46 M66 52 L78 54", stroke: INK, strokeWidth: 1.2, strokeLinecap: "round" })] }) }));
+function Cat({ size, mode = 'light', }) {
+    const c = CAT[mode];
+    const tail = 'M70 84 Q90 78 84 58';
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 96 96", role: "img", "aria-label": "Cat", "data-assistant-mode": mode, children: _jsxs("g", { className: "assistant-body", children: [_jsx("path", { d: tail, stroke: c.edge, strokeWidth: 8, fill: "none", strokeLinecap: "round" }), _jsx("path", { d: tail, stroke: c.tail, strokeWidth: 5, fill: "none", strokeLinecap: "round" }), _jsx("ellipse", { cx: 48, cy: 78, rx: 24, ry: 14, fill: c.fur, stroke: c.edge, strokeWidth: 1.5 }), _jsx("path", { d: "M24 30 L28 8 L42 22 Z", fill: c.fur, stroke: c.edge, strokeWidth: 1.5, strokeLinejoin: "round" }), _jsx("path", { d: "M72 30 L68 8 L54 22 Z", fill: c.fur, stroke: c.edge, strokeWidth: 1.5, strokeLinejoin: "round" }), _jsx("path", { d: "M28 26 L30 14 L38 22 Z", fill: c.ear }), _jsx("path", { d: "M68 26 L66 14 L58 22 Z", fill: c.ear }), _jsx("circle", { cx: 48, cy: 42, r: 24, fill: c.fur, stroke: c.edge, strokeWidth: 1.5 }), _jsx(Eyes, { cx: 48, cy: 38, gap: 18, r: 6.5, colours: c.eye }), _jsx("path", { d: "M45 48 L51 48 L48 52 Z", fill: c.nose }), _jsx("path", { className: "assistant-mouth", d: "M43 55 Q48 58 53 55", stroke: INK, strokeWidth: 2, fill: "none", strokeLinecap: "round" }), _jsx("path", { d: "M30 48 L18 46 M30 52 L18 54 M66 48 L78 46 M66 52 L78 54", stroke: c.whiskers, strokeWidth: 1.2, strokeLinecap: "round" })] }) }));
 }
 /** The L👀P eyes: the product's own face, two eyes and nothing else. */
-function LoopEyes({ size }) {
-    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 96 96", role: "img", "aria-label": "L\uD83D\uDC40P eyes", style: { color: '#FFFFFF' }, children: _jsxs("g", { className: "assistant-body", children: [_jsx(Eyes, { cx: 48, cy: 50, gap: 40, r: 18 }), _jsx("path", { className: "assistant-mouth", d: "M42 80 Q48 84 54 80", stroke: INK, strokeWidth: 2.5, fill: "none", strokeLinecap: "round", opacity: 0 })] }) }));
+function LoopEyes({ size, mode = 'light', }) {
+    const c = LOOP_EYES[mode];
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 96 96", role: "img", "aria-label": "L\uD83D\uDC40P eyes", "data-assistant-mode": mode, children: _jsxs("g", { className: "assistant-body", children: [_jsx(Eyes, { cx: 48, cy: 50, gap: 40, r: 18, colours: c.eye }), _jsx("path", { className: "assistant-mouth", d: "M42 80 Q48 84 54 80", stroke: mode === 'dark' ? INK_DARK : INK, strokeWidth: 2.5, fill: "none", strokeLinecap: "round", opacity: 0 })] }) }));
 }
+const eyeOf = (eye, on) => ({
+    white: eye.white,
+    ring: eye.ring,
+    pupil: eye.pupil,
+    on,
+});
 /** The characters Datalayer ships, in the order a picker shows them. */
 export const ASSISTANT_CHARACTERS = [
-    { id: 'paperclip', name: 'Paper clip', Drawing: PaperClip },
-    { id: 'wizard', name: 'Wizard', Drawing: Wizard },
-    { id: 'cat', name: 'Cat', Drawing: Cat },
-    { id: 'eyes', name: 'L👀P eyes', Drawing: LoopEyes },
+    {
+        id: 'paperclip',
+        name: 'Paper clip',
+        Drawing: PaperClip,
+        keyColours: {
+            light: {
+                edges: [PAPER_CLIP.light.wire, PAPER_CLIP.light.line],
+                eye: eyeOf(PAPER_CLIP.light.eye, 'page'),
+            },
+            dark: {
+                edges: [PAPER_CLIP.dark.wire, PAPER_CLIP.dark.line],
+                eye: eyeOf(PAPER_CLIP.dark.eye, 'page'),
+            },
+        },
+    },
+    {
+        id: 'wizard',
+        name: 'Wizard',
+        Drawing: Wizard,
+        keyColours: {
+            light: {
+                edges: [
+                    WIZARD.light.hat,
+                    WIZARD.light.brim,
+                    WIZARD.light.robe,
+                    WIZARD.light.faceEdge,
+                    WIZARD.light.beardEdge,
+                ],
+                eye: eyeOf(WIZARD.light.eye, WIZARD.light.face),
+            },
+            dark: {
+                edges: [
+                    WIZARD.dark.hat,
+                    WIZARD.dark.brim,
+                    WIZARD.dark.robe,
+                    WIZARD.dark.faceEdge,
+                    WIZARD.dark.beardEdge,
+                ],
+                eye: eyeOf(WIZARD.dark.eye, WIZARD.dark.face),
+            },
+        },
+    },
+    {
+        id: 'cat',
+        name: 'Cat',
+        Drawing: Cat,
+        keyColours: {
+            light: {
+                edges: [CAT.light.edge, CAT.light.whiskers],
+                eye: eyeOf(CAT.light.eye, CAT.light.fur),
+            },
+            dark: {
+                edges: [CAT.dark.edge, CAT.dark.whiskers],
+                eye: eyeOf(CAT.dark.eye, CAT.dark.fur),
+            },
+        },
+    },
+    {
+        id: 'eyes',
+        name: 'L👀P eyes',
+        Drawing: LoopEyes,
+        keyColours: {
+            light: {
+                edges: [LOOP_EYES.light.eye.ring],
+                eye: eyeOf(LOOP_EYES.light.eye, 'page'),
+            },
+            dark: {
+                edges: [LOOP_EYES.dark.eye.white],
+                eye: eyeOf(LOOP_EYES.dark.eye, 'page'),
+            },
+        },
+    },
 ];
 /** The character an assistant shows when none is chosen. */
 export const DEFAULT_ASSISTANT_CHARACTER = 'paperclip';