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/layouts/bots/(partials)/bot-form-preview.tsx

@@ -3,7 +3,8 @@ import Span from "@moduletrace/twui/layout/Span";
 import Stack from "@moduletrace/twui/layout/Stack";
 import BotAvatar from "@/src/components/general/bot-avatar";
 import BotStone from "@/src/components/general/bot-stone";
-import { BotHues, type BotHue } from "@/src/dict/bot-dict";
+import type { BotStoneShape } from "@/src/dict/bot-dict";
+import { paletteColorTitle } from "@/src/utils/bot-color";
 
 type Props = {
     name: string;
@@ -11,7 +12,8 @@ type Props = {
     /**
      * Null for the coordinator.
      */
-    hue: BotHue | null;
+    color: string | null;
+    stone: BotStoneShape;
     image_media_id?: number | string | null;
     picked_src?: string;
 };
@@ -21,23 +23,50 @@ type Props = {
  * or stone, name and job, and its colour (a small stone beside the name
  * when a picture hides the big one).
  */
-export default function BotFormPreview({ name, role, hue, image_media_id, picked_src }: Props) {
+export default function BotFormPreview({
+    name,
+    role,
+    color,
+    stone,
+    image_media_id,
+    picked_src,
+}: Props) {
     const has_picture = Boolean(picked_src || image_media_id);
-    const hue_title = BotHues.find((h) => h.value == hue)?.title;
+    /** A palette colour by name, else a colour the user made up. */
+    const color_title = color
+        ? paletteColorTitle({ color }) || "Its own colour"
+        : null;
 
     return (
         <Row className="min-w-0 grow gap-3! flex-nowrap items-center">
-            <BotAvatar hue={hue} size={56} image_media_id={image_media_id} src={picked_src} />
+            <BotAvatar
+                color={color}
+                stone={stone}
+                size={56}
+                image_media_id={image_media_id}
+                src={picked_src}
+            />
             <Stack className="min-w-0 gap-0!">
                 <Row className="min-w-0 w-full gap-1.5! flex-nowrap items-center">
-                    <Span className="text-sm font-bold leading-5 text-ink truncate">{name.trim() || "Its name"}</Span>
-                    {has_picture && hue ? <BotStone hue={hue} size={18} label={`${hue_title} bot`} /> : null}
+                    <Span className="text-sm font-bold leading-5 text-ink truncate">
+                        {name.trim() || "Its name"}
+                    </Span>
+                    {has_picture && color ? (
+                        <BotStone
+                            color={color}
+                            stone={stone}
+                            size={18}
+                            label={`${color_title} bot`}
+                        />
+                    ) : null}
                 </Row>
                 <Span className="text-xs leading-4 text-ink-secondary truncate w-full">
                     {role.trim() || "Its job"}
                 </Span>
-                {hue_title ? (
-                    <Span className="text-[11px] leading-4 text-ink-secondary">{hue_title}</Span>
+                {color_title ? (
+                    <Span className="text-[11px] leading-4 text-ink-secondary">
+                        {color_title}
+                    </Span>
                 ) : null}
             </Stack>
         </Row>