Let a bot take any colour

A bot's identity was one of seven hues, and the hue picked both its colour
and its stone shape. Now its colour is free and its stone is its own:

- `bots.color` holds any `#rrggbb`, `bots.stone` the flat-cut shape it's
  drawn on. `bots.hue` stays as the palette column they replaced, read only
  as a fallback; `src/scripts/move-bot-colour-to-owners.ts` backfills an
  install from it (safe to rerun).
- `src/utils/bot-color.ts` is the only place a colour is validated or
  resolved (`resolveBotColor`/`resolveBotStone` carry the old hue forward,
  `botColorNeedsPaperFace` flips the eyes to paper on a very dark body), and
  `src/utils/bot-stone-props.ts` gives every row its props, so a row saved
  before this still renders as it did.
- `BotStone` takes the colour as the body's SVG `fill`, the one documented
  exception to the token rule: an arbitrary hex has no token to point at.
  `UnreadDot` follows it.
- The picker keeps the palette tiles (still shape and colour together) and
  adds a native swatch and a hex field, so a custom colour keeps its stone.
  Same place as before: the header avatar's modal and Settings > Bots, for
  crew managers. The coordinator stays hue-less.
- A recolour reaches other open tabs through `pushBotUpdated`.

src/components/general/bot-avatar.tsx

@@ -29,7 +29,7 @@ type Props = ComponentProps<typeof BotStone> & {
 /**
  * A bot's avatar: its custom picture when it has one (a rounded square,
  * never a circle, so it isn't mistaken for a person), else its stone. Its
- * hue still marks it everywhere else, e.g. the unread dot.
+ * colour still marks it everywhere else, e.g. the unread dot.
  */
 export default function BotAvatar({ image_media_id, src: picked, ...stone }: Props) {
     const saved = profileImageUrls({ media_id: image_media_id });

src/components/general/bot-stone.tsx

@@ -1,19 +1,35 @@
 import { twMerge } from "tailwind-merge";
-import type { BotFace, BotHue } from "@/src/dict/bot-dict";
-import { BotHueFillClasses } from "@/src/dict/bot-hue-classes-dict";
+import type { BotFace, BotStoneShape } from "@/src/dict/bot-dict";
 import {
     CoordinatorBodyPath,
     StoneBodyPaths,
     StoneViewBox,
 } from "@/src/data/stone-geometry";
+import { botColorNeedsPaperFace, resolveBotStone } from "@/src/utils/bot-color";
 import BotStoneFace from "./bot-stone-face";
 
 type Props = {
     /**
-     * The bot's identity hue. Omit (or `null`) for the coordinator, which
-     * renders hue-less: ink body, paper eyes, inverted in dark mode.
+     * The bot's identity colour (`#rrggbb`). Omit (or `null`) for the
+     * coordinator, which renders hue-less: ink body, paper eyes, inverted in
+     * dark mode.
+     *
+     * A bot's colour is user data, so it reaches the SVG as a `fill`
+     * attribute rather than a theme token or a Tailwind class: an arbitrary
+     * hex has no token to point at. This is the one place the palette rule
+     * bends; everything else in the app still uses `--color-*`.
      */
-    hue?: BotHue | null;
+    color?: string | null;
+    /**
+     * Which flat-cut stone to draw. Defaults to the shape this bot used to
+     * be tied to, else the first one.
+     */
+    stone?: BotStoneShape | null;
+    /**
+     * Historical palette hue, only to pick the shape and colour of a bot
+     * saved before they were stored apart.
+     */
+    hue?: string | null;
     face?: BotFace;
     size?: number;
     /**
@@ -30,17 +46,25 @@ type Props = {
  * eyes. Never put it in a circle, ring or badge, or add an outline or shadow.
  */
 export default function BotStone({
+    color,
+    stone,
     hue,
     face = "idle",
     size = 32,
     label,
     className,
 }: Props) {
-    const is_coordinator = !hue;
-    const body_path = hue ? StoneBodyPaths[hue] : CoordinatorBodyPath;
-    const body_class = hue ? BotHueFillClasses[hue] : "fill-ink";
-    const eye_fill = is_coordinator ? "fill-paper" : "fill-dark";
-    const eye_stroke = is_coordinator ? "stroke-paper" : "stroke-dark";
+    const is_coordinator = !color;
+    const body_path = is_coordinator
+        ? CoordinatorBodyPath
+        : StoneBodyPaths[resolveBotStone({ stone, hue })];
+    /**
+     * A very dark body keeps its eyes readable in paper; the coordinator is
+     * always paper, since its body is ink.
+     */
+    const paper_face = is_coordinator || botColorNeedsPaperFace({ color: color! });
+    const eye_fill = paper_face ? "fill-paper" : "fill-dark";
+    const eye_stroke = paper_face ? "stroke-paper" : "stroke-dark";
 
     return (
         <svg
@@ -52,7 +76,11 @@ export default function BotStone({
             aria-hidden={label ? undefined : true}
             className={twMerge("shrink-0", className)}
         >
-            <path d={body_path} className={body_class} />
+            <path
+                d={body_path}
+                fill={is_coordinator ? undefined : color!}
+                className={is_coordinator ? "fill-ink" : undefined}
+            />
             <BotStoneFace
                 face={face}
                 fill_class={eye_fill}

src/components/general/logo-icon.tsx

@@ -1,4 +1,5 @@
 import type { ComponentProps } from "react";
+import { BotHues } from "@/src/dict/bot-dict";
 import BotStone from "./bot-stone";
 
 type Props = {
@@ -13,7 +14,8 @@ type Props = {
 export default function LogoIcon({ icon_size = 40, img_props }: Props) {
     return (
         <BotStone
-            hue="ember"
+            color={BotHues[0].color}
+            stone={BotHues[0].value}
             size={icon_size}
             label="Logo Icon"
             className={img_props?.className}

src/components/general/task-list-item.tsx

@@ -6,7 +6,8 @@ import Button from "@moduletrace/twui/layout/Button";
 import type { TaskWithNames } from "@/src/types";
 import { AppContext } from "@/src/pages/__root";
 import BotAvatar from "@/src/components/general/bot-avatar";
-import type { BotFace, BotHue } from "@/src/dict/bot-dict";
+import type { BotFace } from "@/src/dict/bot-dict";
+import botStoneProps from "@/src/utils/bot-stone-props";
 import { TaskStatuses } from "@/src/dict/task-dict";
 import canManageCrew from "@/src/utils/rbac/can-manage-crew";
 import relativeTime from "@/src/utils/relative-time";
@@ -40,7 +41,7 @@ export default function TaskListItem({ task, onOpen, onStatusChange, busy }: Pro
         <Row className="w-full gap-3! flex-nowrap items-start px-3 py-3 border-0 border-b border-solid border-hairline last:border-b-0">
             <BotAvatar
                 image_media_id={task.bot_image_media_id}
-                hue={(task.bot_kind == "coordinator" ? null : task.bot_hue || null) as BotHue | null}
+                {...botStoneProps({ color: task.bot_color, stone: task.bot_stone, hue: task.bot_hue })}
                 face={(task.bot_face || "idle") as BotFace}
                 size={28}
             />