@sbugallo/pokecode 0.2.1 → 0.3.1

package/dist/tui.js

@@ -2,7 +2,7 @@
 // src/adapters/opencode/tui/plugin.tsx
 import { Plugin } from "@opencode/plugin/tui";
 import { createClipboard, createHostClipboard, createRendererClipboardAdapter } from "@opentui/core";
-import { createSignal as createSignal10 } from "solid-js";
+import { createSignal as createSignal11 } from "solid-js";
 
 // src/adapters/opencode/rpc/contract.ts
 import { Rpc } from "@opencode/plugin/rpc";
@@ -135,6 +135,11 @@ var explorationStatusSchema = z4.object({
   locationUnlockThreshold: z4.number().int().positive(),
   regionComplete: z4.boolean()
 });
+function locationUnlockThreshold(input) {
+  const capped = Math.min(Math.max(input.index, 0), input.championIndex);
+  const cumulative = (i) => input.curve.baseTokens * (i + 1) ** input.curve.exponent * (input.championIndex + 1) ** input.curve.regionExponent;
+  return Math.round(cumulative(capped + 1) - cumulative(capped));
+}
 function calculateUnlockProgress(input) {
   if (!input.currentLocationIsLatestUnlocked)
     return { kind: "not-latest" };
@@ -229,10 +234,11 @@ var starterChoiceResultSchema = z8.object({
 });
 var gameplayConfigSchema = z8.object({
   pauseOnPendingChoice: z8.boolean().default(true),
-  xpTokensPerPoint: z8.number().int().positive().default(1000),
   encounterMinimumTokens: z8.number().int().positive().default(200000),
   encounterMaximumTokens: z8.number().int().positive().default(400000),
-  locationUnlockTokens: z8.number().int().positive().default(2160000)
+  locationUnlockBaseTokens: z8.number().int().positive().default(4214000),
+  locationUnlockExponent: z8.number().positive().default(2.64),
+  locationUnlockRegionExponent: z8.number().default(-1.72)
 });
 var usageInputSchema = z8.object({
   sessionId: z8.string().min(1),
@@ -609,6 +615,53 @@ function createPokemonTuiClient(transport) {
   };
 }
 
+// src/adapters/opencode/tui/components/image-protocol.ts
+import { createSignal } from "solid-js";
+var graphicsCorrections = [
+  {
+    terminalName: /^xterm\.js$/i,
+    requires: { sixel: true },
+    protocol: "sixel",
+    reason: "xterm.js image addon Kitty path drops OpenTUI placements"
+  },
+  {
+    terminalName: /orca/i,
+    protocol: "blocks",
+    reason: "stablyai/orca#23547"
+  }
+];
+var requirementsMet = (requires, capabilities) => {
+  if (requires === undefined)
+    return true;
+  if (requires.sixel !== undefined && capabilities?.sixel !== requires.sixel)
+    return false;
+  if (requires.kitty_graphics !== undefined && capabilities?.kitty_graphics !== requires.kitty_graphics) {
+    return false;
+  }
+  return true;
+};
+function spriteImageProtocol(capabilities) {
+  const configured = capabilities?.image_protocol;
+  if (configured !== undefined && configured !== "auto")
+    return configured;
+  const name = capabilities?.terminal.name ?? "";
+  const correction = graphicsCorrections.find((entry) => entry.terminalName.test(name) && requirementsMet(entry.requires, capabilities));
+  return correction?.protocol ?? "auto";
+}
+function createImageProtocolState(source) {
+  const [protocol, setProtocol] = createSignal(spriteImageProtocol(source.capabilities));
+  const listener = (capabilities) => {
+    setProtocol(spriteImageProtocol(capabilities));
+  };
+  source.on("capabilities", listener);
+  return {
+    protocol,
+    dispose: () => {
+      source.off("capabilities", listener);
+    }
+  };
+}
+
 // src/adapters/opencode/tui/dex/actions.tsx
 import { createComponent as _$createComponent2 } from "@opentui/solid";
 
@@ -717,24 +770,82 @@ import { insert as _$insert } from "@opentui/solid";
 import { setProp as _$setProp } from "@opentui/solid";
 import { createElement as _$createElement } from "@opentui/solid";
 import { createTextAttributes } from "@opentui/core";
+
+// src/adapters/opencode/tui/theme.ts
+import { RGBA } from "@opentui/core";
+var hovered = (color) => color.state({ hovered: true }) ?? color.base;
+var toActionColors = (background, label) => ({
+  background: background.base,
+  backgroundHovered: hovered(background),
+  label: label.base,
+  labelHovered: hovered(label)
+});
+var toSurface = (theme) => ({
+  text: theme.text.base,
+  muted: theme.text.muted,
+  accent: theme.hue.accent[200] ?? theme.text.action.primary.base,
+  success: theme.text.feedback.success.base,
+  error: theme.text.feedback.error.base,
+  info: theme.text.feedback.info.base,
+  background: theme.background.base,
+  raised: theme.background.raised.base,
+  highlight: theme.background.raised.max,
+  border: theme.border.base,
+  primary: toActionColors(theme.background.action.primary, theme.text.action.primary),
+  secondary: toActionColors(theme.background.action.secondary, theme.text.action.secondary)
+});
+var toPokecodeTheme = (theme) => ({
+  current: toSurface(theme),
+  dialog: toSurface(theme.surface("dialog"))
+});
+var transparent = RGBA.fromInts(0, 0, 0, 0);
+var flat = (color) => ({ base: color, state: () => color });
+var fallbackResolvedTheme = (() => {
+  const text = RGBA.fromHex("#d4d4d4");
+  const muted = RGBA.fromHex("#808080");
+  const theme = {
+    hue: { accent: { 200: RGBA.fromHex("#a78bfa") } },
+    text: {
+      base: text,
+      muted,
+      action: {
+        primary: flat(text),
+        secondary: flat(muted)
+      },
+      feedback: {
+        error: { base: RGBA.fromHex("#ef4444") },
+        success: { base: RGBA.fromHex("#22c55e") },
+        info: { base: RGBA.fromHex("#3b82f6") }
+      }
+    },
+    background: {
+      base: RGBA.fromHex("#111827"),
+      raised: { base: RGBA.fromHex("#1f2937"), max: RGBA.fromHex("#374151") },
+      action: {
+        primary: flat(transparent),
+        secondary: flat(transparent)
+      }
+    },
+    border: { base: RGBA.fromHex("#4b5563") },
+    surface: () => theme
+  };
+  return theme;
+})();
+var fallbackPokecodeTheme = toPokecodeTheme(fallbackResolvedTheme);
+
+// src/adapters/opencode/tui/components/action-button.tsx
 var bold = createTextAttributes({
   bold: true
 });
 function PokecodeActionButton(properties) {
-  const colors = {
-    primary: {
-      base: "#2563eb",
-      hovered: "#1d4ed8"
-    },
-    secondary: {
-      base: "#6b7280",
-      hovered: "#4b5563"
-    },
-    success: {
-      base: "#16a34a",
-      hovered: "#15803d"
-    }
-  }[properties.tone];
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
+  const colors = () => {
+    const action = properties.tone === "secondary" ? surface().secondary : surface().primary;
+    return {
+      background: properties.hovered() ? action.backgroundHovered : action.background,
+      label: properties.tone === "success" ? surface().success : properties.hovered() ? action.labelHovered : action.label
+    };
+  };
   return (() => {
     var _el$ = _$createElement("button"), _el$2 = _$createElement("text");
     _$insertNode(_el$, _el$2);
@@ -745,22 +856,23 @@ function PokecodeActionButton(properties) {
     _$setProp(_el$, "paddingRight", 2);
     _$setProp(_el$, "type", "button");
     _$setProp(_el$, "onMouseUp", () => void properties.onActivate());
-    _$setProp(_el$2, "fg", "#ffffff");
     _$insert(_el$2, () => properties.label);
     _$effect((_p$) => {
-      var _v$ = properties.hovered() ? colors.hovered : colors.base, _v$2 = properties.onLeave, _v$3 = properties.onHover, _v$4 = properties.onLeave, _v$5 = properties.onHover;
+      var _v$ = colors().background, _v$2 = properties.onLeave, _v$3 = properties.onHover, _v$4 = properties.onLeave, _v$5 = properties.onHover, _v$6 = colors().label;
       _v$ !== _p$.e && (_p$.e = _$setProp(_el$, "backgroundColor", _v$, _p$.e));
       _v$2 !== _p$.t && (_p$.t = _$setProp(_el$, "onBlur", _v$2, _p$.t));
       _v$3 !== _p$.a && (_p$.a = _$setProp(_el$, "onFocus", _v$3, _p$.a));
       _v$4 !== _p$.o && (_p$.o = _$setProp(_el$, "onMouseOut", _v$4, _p$.o));
       _v$5 !== _p$.i && (_p$.i = _$setProp(_el$, "onMouseOver", _v$5, _p$.i));
+      _v$6 !== _p$.n && (_p$.n = _$setProp(_el$2, "fg", _v$6, _p$.n));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined
     });
     return _el$;
   })();
@@ -792,6 +904,7 @@ function isDexCloseKey(key) {
 }
 function PokemonDexDialog(properties) {
   const context = usePlugin();
+  const surface = () => toPokecodeTheme(context.theme).dialog;
   const dimensions = useTerminalDimensions();
   const height = () => Math.max(10, Math.floor(dimensions().height / 2) - 1);
   const width = () => dexModalWidth(dimensions().width);
@@ -870,24 +983,34 @@ function PokemonDexDialog(properties) {
         _$insertNode2(_el$9, _el$1);
         _$insert2(_el$9, () => pokemon.number.toString().padStart(4, "0"), _el$1);
         _$insert2(_el$9, () => dexDisplayName(pokemon.name, pokemon.status), null);
-        _$effect2((_$p) => _$setProp2(_el$8, "fg", pokemon.status === "caught" ? "#22c55e" : context.theme.text.muted, _$p));
+        _$effect2((_p$) => {
+          var _v$6 = pokemon.status === "caught" ? surface().success : surface().muted, _v$7 = pokemon.status === "unknown" ? surface().muted : surface().text;
+          _v$6 !== _p$.e && (_p$.e = _$setProp2(_el$8, "fg", _v$6, _p$.e));
+          _v$7 !== _p$.t && (_p$.t = _$setProp2(_el$9, "fg", _v$7, _p$.t));
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
         return _el$7;
       })()
     }));
     _$insertNode2(_el$5, _$createTextNode(`\u2191\u2193: 1 item \xB7 \u2190\u2192: 10 items \xB7 Esc: Close`));
     _$setProp2(_el$5, "flexShrink", 0);
     _$effect2((_p$) => {
-      var _v$ = height(), _v$2 = width(), _v$3 = context.theme.text.base, _v$4 = height() - 2;
+      var _v$ = height(), _v$2 = width(), _v$3 = surface().text, _v$4 = height() - 2, _v$5 = surface().muted;
       _v$ !== _p$.e && (_p$.e = _$setProp2(_el$, "height", _v$, _p$.e));
       _v$2 !== _p$.t && (_p$.t = _$setProp2(_el$, "width", _v$2, _p$.t));
       _v$3 !== _p$.a && (_p$.a = _$setProp2(_el$2, "fg", _v$3, _p$.a));
       _v$4 !== _p$.o && (_p$.o = _$setProp2(_el$3, "height", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp2(_el$5, "fg", _v$5, _p$.i));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
-      o: undefined
+      o: undefined,
+      i: undefined
     });
     return _el$;
   })();
@@ -958,12 +1081,12 @@ function createExportAction(dependencies) {
 
 // src/adapters/opencode/tui/pc/actions.tsx
 import { createComponent as _$createComponent7 } from "@opentui/solid";
-import { createSignal as createSignal4 } from "solid-js";
+import { createSignal as createSignal5 } from "solid-js";
 
 // src/adapters/opencode/tui/pc/dialog.tsx
 import { memo as _$memo5 } from "@opentui/solid";
-import { effect as _$effect6 } from "@opentui/solid";
 import { insertNode as _$insertNode6 } from "@opentui/solid";
+import { effect as _$effect6 } from "@opentui/solid";
 import { createComponent as _$createComponent6 } from "@opentui/solid";
 import { use as _$use3 } from "@opentui/solid";
 import { insert as _$insert6 } from "@opentui/solid";
@@ -971,7 +1094,7 @@ import { setProp as _$setProp6 } from "@opentui/solid";
 import { createElement as _$createElement6 } from "@opentui/solid";
 import { createTextAttributes as createTextAttributes2, MouseButton as MouseButton2 } from "@opentui/core";
 import { useKeyboard as useKeyboard2, useTerminalDimensions as useTerminalDimensions2 } from "@opentui/solid";
-import { createSignal as createSignal3, For as For4, Show as Show3 } from "solid-js";
+import { createSignal as createSignal4, For as For4, Show as Show3 } from "solid-js";
 
 // src/adapters/presentation/pc-copy.ts
 var english2 = {
@@ -106360,7 +106483,7 @@ import { use as _$use2 } from "@opentui/solid";
 import { createElement as _$createElement3 } from "@opentui/solid";
 import { createComponent as _$createComponent3 } from "@opentui/solid";
 import { MouseButton } from "@opentui/core";
-import { createSignal, For as For2, Show } from "solid-js";
+import { createSignal as createSignal2, For as For2, Show } from "solid-js";
 
 // src/domain/content/catalogs/abilities-catalog.ts
 var abilitiesCatalog = [
@@ -108440,6 +108563,7 @@ var alolaLocationsCatalog = {
       maximumLevel: 50
     }
   ],
+  championLocationId: "alola-pokemon-league",
   locations: [
     {
       id: "iki-town",
@@ -114445,6 +114569,7 @@ var galarLocationsCatalog = {
       maximumLevel: 70
     }
   ],
+  championLocationId: "energy-plant",
   locations: [
     {
       id: "postwick",
@@ -122517,6 +122642,7 @@ var hoennLocationsCatalog = {
       maximumLevel: 5
     }
   ],
+  championLocationId: "ever-grande-city",
   locations: [
     {
       id: "littleroot-town",
@@ -126071,6 +126197,7 @@ var johtoLocationsCatalog = {
       maximumLevel: 40
     }
   ],
+  championLocationId: "johto-indigo-plateau",
   locations: [
     {
       id: "new-bark-town",
@@ -130223,6 +130350,7 @@ var kalosLocationsCatalog = {
       maximumLevel: 70
     }
   ],
+  championLocationId: "kalos-pokemon-league",
   locations: [
     {
       id: "vaniville-town",
@@ -134551,6 +134679,7 @@ var kantoLocationsCatalog = {
     "squirtle"
   ],
   specialEncounters: [],
+  championLocationId: "indigo-plateau",
   locations: [
     {
       id: "pallet-town",
@@ -150232,6 +150361,7 @@ var paldeaLocationsCatalog = {
     "quaxly"
   ],
   specialEncounters: [],
+  championLocationId: "paldea-pokemon-league",
   locations: [
     {
       id: "cabo-poco",
@@ -168069,6 +168199,7 @@ var sinnohLocationsCatalog = {
       maximumLevel: 50
     }
   ],
+  championLocationId: "victory-road",
   locations: [
     {
       id: "twinleaf-town",
@@ -175272,6 +175403,7 @@ var unovaLocationsCatalog = {
       maximumLevel: 15
     }
   ],
+  championLocationId: "unova-pokemon-league",
   locations: [
     {
       id: "nuvema-town",
@@ -181835,6 +181967,7 @@ var regionSchema = namedIdSchema.extend({
   locations: z10.array(locationSchema).min(1),
   starterSpeciesIds: z10.array(z10.string().min(1)).length(3),
   starterCatchLocationId: z10.string().min(1),
+  championLocationId: z10.string().min(1),
   specials: z10.array(specialSchema)
 });
 var speciesSchema = namedIdSchema.extend({
@@ -181928,6 +182061,7 @@ var catalog = generatedCatalogSchema.parse({
       localization: region.localization,
       starterSpeciesIds: regionalCatalog.starterPokemons,
       starterCatchLocationId: locations[0]?.id ?? "",
+      championLocationId: regionalCatalog.championLocationId,
       specials: specialsForCatalog(regionalCatalog).flatMap((special) => {
         const pokemon = pokemonById.get(special.id);
         const ability = englishAbilityName(pokemon?.abilities[0]);
@@ -181976,6 +182110,12 @@ var catalog = generatedCatalogSchema.parse({
   ]))))
 });
 var generatedContentCatalog = catalog;
+var championIndexByRegion = new Map(catalog.regions.map((region) => {
+  const index = region.locations.findIndex((location) => location.id === region.championLocationId);
+  if (index < 0)
+    throw new Error(`Unknown championLocationId ${region.championLocationId}`);
+  return [region.id, index];
+}));
 var regionsById = new Map(catalog.regions.map((region) => [region.id, region]));
 var speciesById = new Map([...catalog.species, ...catalog.regionalForms].map((species) => [species.id, species]));
 var movesById = new Map(movesCatalog.map((move) => [move.id, move]));
@@ -182028,6 +182168,13 @@ function nextLocation(regionId, locationId) {
   const index = locations.findIndex((location) => location.id === locationId);
   return index < 0 ? null : locations[index + 1] ?? null;
 }
+function championIndexForRegion(regionId) {
+  return championIndexByRegion.get(regionId) ?? null;
+}
+function locationIndexFor(regionId, locationId) {
+  const index = locationsForRegion(regionId).findIndex((location) => location.id === locationId);
+  return index < 0 ? null : index;
+}
 function startersForRegion(regionId, language = "en") {
   return regionsById.get(regionId)?.starterSpeciesIds.flatMap((speciesId) => {
     const species = speciesById.get(speciesId);
@@ -182185,8 +182332,9 @@ extend({ button: StarterButtonRenderable });
 
 // src/adapters/opencode/tui/components/move-list.tsx
 function MoveList(properties) {
-  const [hovered, setHovered] = createSignal(null);
-  const [inspected, setInspected] = createSignal(null);
+  const [hovered2, setHovered] = createSignal2(null);
+  const [inspected, setInspected] = createSignal2(null);
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   const moves = () => properties.moves.map((move) => presentMove(move, properties.language));
   const description = () => moves().find((move) => move.id === inspected())?.description;
   let list;
@@ -182216,6 +182364,8 @@ function MoveList(properties) {
         }
       };
       const secondary = () => move.id === properties.offeredMoveId;
+      const action = () => secondary() ? surface().secondary : surface().primary;
+      const hoveredRow = () => hovered2() === move.id;
       return (() => {
         var _el$ = _$createElement3("box"), _el$2 = _$createElement3("button"), _el$3 = _$createElement3("text"), _el$4 = _$createElement3("text"), _el$5 = _$createElement3("text");
         _$insertNode3(_el$, _el$2);
@@ -182252,7 +182402,6 @@ function MoveList(properties) {
           event.stopPropagation();
           properties.onActivate(move.id);
         });
-        _$setProp3(_el$3, "fg", "#ffffff");
         _$setProp3(_el$3, "wrapMode", "word");
         _$insert3(_el$3, () => move.name);
         _$setProp3(_el$4, "maxWidth", "100%");
@@ -182262,13 +182411,16 @@ function MoveList(properties) {
         _$setProp3(_el$5, "wrapMode", "word");
         _$insert3(_el$5, () => move.stats);
         _$effect3((_p$) => {
-          var _v$ = properties.leftAlignMoves ? "flex-start" : "center", _v$2 = `move-${move.id}`, _v$3 = secondary() ? hovered() === move.id ? "#4b5563" : "#6b7280" : hovered() === move.id ? "#1d4ed8" : "#2563eb", _v$4 = properties.centered && !properties.leftAlignMoves ? "center" : "left", _v$5 = properties.centered && !properties.leftAlignMoves ? "center" : "left", _v$6 = properties.centered && !properties.leftAlignMoves ? "center" : "left";
+          var _v$ = properties.leftAlignMoves ? "flex-start" : "center", _v$2 = `move-${move.id}`, _v$3 = hoveredRow() ? action().backgroundHovered : action().background, _v$4 = hoveredRow() ? action().labelHovered : action().label, _v$5 = properties.centered && !properties.leftAlignMoves ? "center" : "left", _v$6 = surface().muted, _v$7 = properties.centered && !properties.leftAlignMoves ? "center" : "left", _v$8 = surface().muted, _v$9 = properties.centered && !properties.leftAlignMoves ? "center" : "left";
           _v$ !== _p$.e && (_p$.e = _$setProp3(_el$, "alignItems", _v$, _p$.e));
           _v$2 !== _p$.t && (_p$.t = _$setProp3(_el$2, "id", _v$2, _p$.t));
           _v$3 !== _p$.a && (_p$.a = _$setProp3(_el$2, "backgroundColor", _v$3, _p$.a));
-          _v$4 !== _p$.o && (_p$.o = _$setProp3(_el$3, "textAlign", _v$4, _p$.o));
-          _v$5 !== _p$.i && (_p$.i = _$setProp3(_el$4, "textAlign", _v$5, _p$.i));
-          _v$6 !== _p$.n && (_p$.n = _$setProp3(_el$5, "textAlign", _v$6, _p$.n));
+          _v$4 !== _p$.o && (_p$.o = _$setProp3(_el$3, "fg", _v$4, _p$.o));
+          _v$5 !== _p$.i && (_p$.i = _$setProp3(_el$3, "textAlign", _v$5, _p$.i));
+          _v$6 !== _p$.n && (_p$.n = _$setProp3(_el$4, "fg", _v$6, _p$.n));
+          _v$7 !== _p$.s && (_p$.s = _$setProp3(_el$4, "textAlign", _v$7, _p$.s));
+          _v$8 !== _p$.h && (_p$.h = _$setProp3(_el$5, "fg", _v$8, _p$.h));
+          _v$9 !== _p$.r && (_p$.r = _$setProp3(_el$5, "textAlign", _v$9, _p$.r));
           return _p$;
         }, {
           e: undefined,
@@ -182276,7 +182428,10 @@ function MoveList(properties) {
           a: undefined,
           o: undefined,
           i: undefined,
-          n: undefined
+          n: undefined,
+          s: undefined,
+          h: undefined,
+          r: undefined
         });
         return _el$;
       })();
@@ -182344,15 +182499,17 @@ function MoveList(properties) {
     _$setProp3(_el$9, "wrapMode", "word");
     _$insert3(_el$9, () => description() || moveInspectionHint(properties.language));
     _$effect3((_p$) => {
-      var _v$7 = properties.height ?? "auto", _v$8 = properties.height === undefined ? 6 : Math.min(6, Math.max(2, Math.floor(properties.height / 4))), _v$9 = properties.centered ? "center" : "left";
-      _v$7 !== _p$.e && (_p$.e = _$setProp3(_el$6, "height", _v$7, _p$.e));
-      _v$8 !== _p$.t && (_p$.t = _$setProp3(_el$8, "height", _v$8, _p$.t));
-      _v$9 !== _p$.a && (_p$.a = _$setProp3(_el$9, "textAlign", _v$9, _p$.a));
+      var _v$0 = properties.height ?? "auto", _v$1 = properties.height === undefined ? 6 : Math.min(6, Math.max(2, Math.floor(properties.height / 4))), _v$10 = surface().text, _v$11 = properties.centered ? "center" : "left";
+      _v$0 !== _p$.e && (_p$.e = _$setProp3(_el$6, "height", _v$0, _p$.e));
+      _v$1 !== _p$.t && (_p$.t = _$setProp3(_el$8, "height", _v$1, _p$.t));
+      _v$10 !== _p$.a && (_p$.a = _$setProp3(_el$9, "fg", _v$10, _p$.a));
+      _v$11 !== _p$.o && (_p$.o = _$setProp3(_el$9, "textAlign", _v$11, _p$.o));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
-      a: undefined
+      a: undefined,
+      o: undefined
     });
     return _el$6;
   })();
@@ -182366,9 +182523,9 @@ import { memo as _$memo3 } from "@opentui/solid";
 import { setProp as _$setProp4 } from "@opentui/solid";
 import { createElement as _$createElement4 } from "@opentui/solid";
 import { createComponent as _$createComponent4 } from "@opentui/solid";
-import { createSignal as createSignal2, Show as Show2 } from "solid-js";
+import { createSignal as createSignal3, Show as Show2 } from "solid-js";
 function Sprite(properties) {
-  const [sprite, setSprite] = createSignal2(null);
+  const [sprite, setSprite] = createSignal3(null);
   const setSpriteIfOwned = createOwnerBoundCallback(setSprite);
   const width = properties.width ?? 8;
   const height = properties.height ?? 4;
@@ -182377,6 +182534,7 @@ function Sprite(properties) {
     const resolved = sprite();
     return resolved?.kind === "cached" ? resolved.source : null;
   };
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   return _$createComponent4(Show2, {
     get when() {
       return source();
@@ -182393,6 +182551,7 @@ function Sprite(properties) {
           var _c$ = _$memo3(() => properties.compactFallback === true);
           return () => _c$() ? sprite() === null ? "\u2026" : "?" : _$memo3(() => sprite() === null)() ? uiCopy(properties.language?.() ?? "en").loadingSprite : uiCopy(properties.language?.() ?? "en").spriteUnavailable;
         })());
+        _$effect4((_$p) => _$setProp4(_el$2, "fg", surface().muted, _$p));
         return _el$;
       })();
     },
@@ -182401,7 +182560,15 @@ function Sprite(properties) {
       _$setProp4(_el$3, "fit", "fit");
       _$setProp4(_el$3, "width", width);
       _$setProp4(_el$3, "height", height);
-      _$effect4((_$p) => _$setProp4(_el$3, "source", cachedSource(), _$p));
+      _$effect4((_p$) => {
+        var _v$ = cachedSource(), _v$2 = properties.protocol?.() ?? "auto";
+        _v$ !== _p$.e && (_p$.e = _$setProp4(_el$3, "source", _v$, _p$.e));
+        _v$2 !== _p$.t && (_p$.t = _$setProp4(_el$3, "protocol", _v$2, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
       return _el$3;
     })()
   });
@@ -182411,6 +182578,7 @@ function Sprite(properties) {
 var stats = ["hp", "attack", "defense", "specialAttack", "specialDefense", "speed"];
 function PcDetails(properties) {
   const copy = () => pcCopy(properties.language);
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   const values = () => pokemonStats(properties.pokemon);
   const nature = () => pokemonNatureModifiers(properties.pokemon.nature);
   const gender = () => properties.pokemon.gender;
@@ -182435,6 +182603,10 @@ function PcDetails(properties) {
       get resolve() {
         return properties.resolveSprite;
       },
+      get protocol() {
+        return properties.imageProtocol;
+      },
+      theme: surface,
       get shiny() {
         return properties.pokemon.shiny;
       },
@@ -182463,7 +182635,7 @@ function PcDetails(properties) {
         return (() => {
           var _el$1 = _$createElement5("text");
           _$insert5(_el$1, () => statLine([name(), String(values()[stat]), String(properties.pokemon.evs[stat]), String(properties.pokemon.ivs[stat])], stat === nature().increased ? "\u2191" : stat === nature().decreased ? "\u2193" : " "));
-          _$effect5((_$p) => _$setProp5(_el$1, "fg", stat === nature().increased ? "#ef4444" : stat === nature().decreased ? "#3b82f6" : properties.textColor, _$p));
+          _$effect5((_$p) => _$setProp5(_el$1, "fg", stat === nature().increased ? surface().error : stat === nature().decreased ? surface().info : surface().text, _$p));
           return _el$1;
         })();
       }
@@ -182479,6 +182651,7 @@ function PcDetails(properties) {
       return () => _c$() ? (() => {
         var _el$10 = _$createElement5("text");
         _$insertNode5(_el$10, _$createTextNode2(`\u2014`));
+        _$effect5((_$p) => _$setProp5(_el$10, "fg", surface().muted, _$p));
         return _el$10;
       })() : _$createComponent5(MoveList, {
         get moves() {
@@ -182486,9 +182659,25 @@ function PcDetails(properties) {
         },
         get language() {
           return properties.language;
-        }
+        },
+        theme: surface
       });
     })(), null);
+    _$effect5((_p$) => {
+      var _v$ = surface().text, _v$2 = surface().text, _v$3 = surface().text, _v$4 = surface().muted, _v$5 = surface().muted;
+      _v$ !== _p$.e && (_p$.e = _$setProp5(_el$3, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp5(_el$5, "fg", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp5(_el$6, "fg", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp5(_el$8, "fg", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp5(_el$0, "fg", _v$5, _p$.i));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined
+    });
     return _el$;
   })();
 }
@@ -182500,16 +182689,15 @@ var bold2 = createTextAttributes2({
 function PokemonPcDialog(properties) {
   const dimensions = useTerminalDimensions2();
   const height = () => Math.min(44, Math.max(1, dimensions().height - 6));
-  const [index, setIndex] = createSignal3(0);
-  const [selected, setSelected] = createSignal3([...properties.partyIds]);
-  const [busy, setBusy] = createSignal3(false);
-  const [feedback, setFeedback] = createSignal3("");
-  const [mode, setMode] = createSignal3("browse");
-  const [name, setName] = createSignal3("");
+  const [index, setIndex] = createSignal4(0);
+  const [selected, setSelected] = createSignal4([...properties.partyIds]);
+  const [busy, setBusy] = createSignal4(false);
+  const [feedback, setFeedback] = createSignal4("");
+  const [mode, setMode] = createSignal4("browse");
+  const [name, setName] = createSignal4("");
   const isOwned = createOwnerGuard();
   const copy = () => pcCopy(properties.language);
-  const textColor = () => typeof properties.textColor === "function" ? properties.textColor() : properties.textColor;
-  const mutedColor = () => typeof properties.mutedColor === "function" ? properties.mutedColor() : properties.mutedColor;
+  const surface = () => properties.theme?.().dialog ?? fallbackPokecodeTheme.dialog;
   const inspected = () => properties.pokemon[index()];
   let list;
   let details;
@@ -182721,7 +182909,7 @@ function PokemonPcDialog(properties) {
         });
         _$insert6(_el$21, () => `${pokemon.name} Lv.${pokemon.level}`);
         _$effect6((_p$) => {
-          var _v$7 = selected().includes(pokemon.id) ? "#22c55e" : mutedColor(), _v$8 = index() === row() ? "#2563eb" : undefined, _v$9 = index() === row() ? "#ffffff" : textColor();
+          var _v$7 = selected().includes(pokemon.id) ? surface().success : surface().muted, _v$8 = index() === row() ? surface().highlight : undefined, _v$9 = surface().text;
           _v$7 !== _p$.e && (_p$.e = _$setProp6(_el$19, "fg", _v$7, _p$.e));
           _v$8 !== _p$.t && (_p$.t = _$setProp6(_el$20, "backgroundColor", _v$8, _p$.t));
           _v$9 !== _p$.a && (_p$.a = _$setProp6(_el$21, "fg", _v$9, _p$.a));
@@ -182741,6 +182929,7 @@ function PokemonPcDialog(properties) {
       get children() {
         var _el$6 = _$createElement6("text");
         _$insert6(_el$6, () => copy().empty);
+        _$effect6((_$p) => _$setProp6(_el$6, "fg", surface().muted, _$p));
         return _el$6;
       }
     }), null);
@@ -182771,11 +182960,12 @@ function PokemonPcDialog(properties) {
         get language() {
           return properties.language;
         },
-        get textColor() {
-          return textColor();
-        },
+        theme: surface,
         get resolveSprite() {
           return properties.resolveSprite;
+        },
+        get imageProtocol() {
+          return properties.imageProtocol;
         }
       })
     }));
@@ -182788,7 +182978,7 @@ function PokemonPcDialog(properties) {
           var _el$8 = _$createElement6("text");
           _$setProp6(_el$8, "flexShrink", 0);
           _$insert6(_el$8, () => copy().renamePrompt);
-          _$effect6((_$p) => _$setProp6(_el$8, "fg", textColor(), _$p));
+          _$effect6((_$p) => _$setProp6(_el$8, "fg", surface().text, _$p));
           return _el$8;
         })(), (() => {
           var _el$9 = _$createElement6("input");
@@ -182817,7 +183007,7 @@ function PokemonPcDialog(properties) {
         var _el$0 = _$createElement6("text");
         _$setProp6(_el$0, "flexShrink", 0);
         _$insert6(_el$0, () => `${inspected()?.name ?? ""}: ${copy().releasePrompt}`);
-        _$effect6((_$p) => _$setProp6(_el$0, "fg", textColor(), _$p));
+        _$effect6((_$p) => _$setProp6(_el$0, "fg", surface().text, _$p));
         return _el$0;
       }
     }), null);
@@ -182829,7 +183019,7 @@ function PokemonPcDialog(properties) {
         var _el$1 = _$createElement6("text");
         _$setProp6(_el$1, "flexShrink", 0);
         _$insert6(_el$1, feedback);
-        _$effect6((_$p) => _$setProp6(_el$1, "fg", mutedColor(), _$p));
+        _$effect6((_$p) => _$setProp6(_el$1, "fg", surface().muted, _$p));
         return _el$1;
       }
     }), null);
@@ -182842,7 +183032,7 @@ function PokemonPcDialog(properties) {
           var _el$22 = _$createElement6("text");
           _$setProp6(_el$22, "flexShrink", 0);
           _$insert6(_el$22, () => copy().editActions);
-          _$effect6((_$p) => _$setProp6(_el$22, "fg", mutedColor(), _$p));
+          _$effect6((_$p) => _$setProp6(_el$22, "fg", surface().muted, _$p));
           return _el$22;
         })();
       },
@@ -182869,7 +183059,7 @@ function PokemonPcDialog(properties) {
           });
           _$insert6(_el$14, () => `F: ${copy().release}`);
           _$effect6((_p$) => {
-            var _v$3 = mutedColor(), _v$4 = mutedColor();
+            var _v$3 = surface().muted, _v$4 = surface().muted;
             _v$3 !== _p$.e && (_p$.e = _$setProp6(_el$12, "fg", _v$3, _p$.e));
             _v$4 !== _p$.t && (_p$.t = _$setProp6(_el$14, "fg", _v$4, _p$.t));
             return _p$;
@@ -182882,19 +183072,19 @@ function PokemonPcDialog(properties) {
           var _el$15 = _$createElement6("text");
           _$setProp6(_el$15, "flexShrink", 0);
           _$insert6(_el$15, () => copy().navigation);
-          _$effect6((_$p) => _$setProp6(_el$15, "fg", mutedColor(), _$p));
+          _$effect6((_$p) => _$setProp6(_el$15, "fg", surface().muted, _$p));
           return _el$15;
         })(), (() => {
           var _el$16 = _$createElement6("text");
           _$setProp6(_el$16, "flexShrink", 0);
           _$insert6(_el$16, () => copy().actions);
-          _$effect6((_$p) => _$setProp6(_el$16, "fg", mutedColor(), _$p));
+          _$effect6((_$p) => _$setProp6(_el$16, "fg", surface().muted, _$p));
           return _el$16;
         })()];
       }
     }), null);
     _$effect6((_p$) => {
-      var _v$5 = height(), _v$6 = textColor();
+      var _v$5 = height(), _v$6 = surface().text;
       _v$5 !== _p$.e && (_p$.e = _$setProp6(_el$, "height", _v$5, _p$.e));
       _v$6 !== _p$.t && (_p$.t = _$setProp6(_el$2, "fg", _v$6, _p$.t));
       return _p$;
@@ -182925,7 +183115,7 @@ function createPcAction(dependencies) {
     const collection = await dependencies.rpc.collection({});
     if (dependencies.state.isDisposed())
       return;
-    const [pokemon, setPokemon] = createSignal4(collection.pokemon);
+    const [pokemon, setPokemon] = createSignal5(collection.pokemon);
     const manage = async (operation, update) => {
       const result = await operation;
       dependencies.state.apply(result.state);
@@ -182948,15 +183138,15 @@ function createPcAction(dependencies) {
       get language() {
         return dependencies.state.state().locale;
       },
-      get textColor() {
-        return dependencies.theme.base;
-      },
-      get mutedColor() {
-        return dependencies.theme.muted;
+      get theme() {
+        return dependencies.theme;
       },
       get resolveSprite() {
         return dependencies.resolveSprite;
       },
+      get imageProtocol() {
+        return dependencies.imageProtocol;
+      },
       onClose: () => {
         if (!dependencies.state.isDisposed())
           dependencies.dialog.clear();
@@ -182981,7 +183171,7 @@ function createPcAction(dependencies) {
 }
 
 // src/adapters/opencode/tui/sidebar/actions.ts
-import { createSignal as createSignal5 } from "solid-js";
+import { createSignal as createSignal6 } from "solid-js";
 
 // src/adapters/presentation/localization.ts
 function localizePokemon(pokemon, language) {
@@ -183140,8 +183330,8 @@ function captureNotification(encounter, destination, language) {
 
 // src/adapters/opencode/tui/sidebar/actions.ts
 function createSidebarActions(dependencies) {
-  const [selectingStarter, setSelectingStarter] = createSignal5(null);
-  const [resolvingEncounterId, setResolvingEncounterId] = createSignal5(null);
+  const [selectingStarter, setSelectingStarter] = createSignal6(null);
+  const [resolvingEncounterId, setResolvingEncounterId] = createSignal6(null);
   return {
     travelToLocation: async (locationId) => {
       const result = await dependencies.rpc.travelTo({ locationId });
@@ -183274,16 +183464,16 @@ function ExportCommand(properties) {
 }
 
 // src/adapters/opencode/tui/sidebar/view.tsx
-import { effect as _$effect9 } from "@opentui/solid";
 import { mergeProps as _$mergeProps } from "@opentui/solid";
 import { insertNode as _$insertNode9 } from "@opentui/solid";
 import { memo as _$memo6 } from "@opentui/solid";
 import { createComponent as _$createComponent10 } from "@opentui/solid";
+import { effect as _$effect9 } from "@opentui/solid";
 import { insert as _$insert9 } from "@opentui/solid";
 import { setProp as _$setProp9 } from "@opentui/solid";
 import { createElement as _$createElement9 } from "@opentui/solid";
 import { MouseButton as MouseButton4 } from "@opentui/core";
-import { createSignal as createSignal7, Match as Match2, Show as Show5, Switch as Switch2 } from "solid-js";
+import { createSignal as createSignal8, Match as Match2, Show as Show5, Switch as Switch2 } from "solid-js";
 
 // src/domain/choices/choices.ts
 import { z as z11 } from "zod";
@@ -183344,7 +183534,7 @@ import { createElement as _$createElement7 } from "@opentui/solid";
 import { createComponent as _$createComponent8 } from "@opentui/solid";
 import { MouseButton as MouseButton3 } from "@opentui/core";
 import { useTerminalDimensions as useTerminalDimensions3 } from "@opentui/solid";
-import { createSignal as createSignal6, Match, Show as Show4, Switch } from "solid-js";
+import { createSignal as createSignal7, Match, Show as Show4, Switch } from "solid-js";
 function PendingChoiceCard(properties) {
   const choice = () => properties.state().pendingChoices[0];
   return _$createComponent8(Show4, {
@@ -183369,8 +183559,14 @@ function PendingChoiceCard(properties) {
               get resolveSprite() {
                 return properties.resolveSprite;
               },
+              get imageProtocol() {
+                return properties.imageProtocol;
+              },
               get language() {
                 return properties.language;
+              },
+              get theme() {
+                return properties.theme;
               }
             });
           }
@@ -183386,11 +183582,17 @@ function PendingChoiceCard(properties) {
               get resolveSprite() {
                 return properties.resolveSprite;
               },
+              get imageProtocol() {
+                return properties.imageProtocol;
+              },
               get language() {
                 return properties.language;
               },
               get onResolve() {
                 return properties.onResolveEvolution;
+              },
+              get theme() {
+                return properties.theme;
               }
             });
           }
@@ -183411,6 +183613,7 @@ function MoveChoiceCard(properties) {
     return null;
   const dimensions = useTerminalDimensions3();
   const language = () => properties.language?.() ?? "en";
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   const moves = [...pokemon.moves, payload.move];
   const copy = () => uiCopy(language());
   return (() => {
@@ -183436,6 +183639,10 @@ function MoveChoiceCard(properties) {
       get resolve() {
         return properties.resolveSprite;
       },
+      get protocol() {
+        return properties.imageProtocol;
+      },
+      theme: surface,
       get shiny() {
         return pokemon.shiny;
       },
@@ -183463,8 +183670,20 @@ function MoveChoiceCard(properties) {
       get height() {
         return Math.min(28, Math.max(6, dimensions().height - 19));
       },
-      onActivate: (moveId) => properties.onResolve(choice.id, moveId)
+      onActivate: (moveId) => properties.onResolve(choice.id, moveId),
+      get theme() {
+        return properties.theme;
+      }
     }), null);
+    _$effect7((_p$) => {
+      var _v$ = surface().text, _v$2 = surface().muted;
+      _v$ !== _p$.e && (_p$.e = _$setProp7(_el$2, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp7(_el$3, "fg", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$;
   })();
 }
@@ -183478,7 +183697,8 @@ function EvolutionChoiceCard(properties) {
   const pokemon = properties.party().find((slot) => slot.pokemon?.id === payload.pokemonId)?.pokemon ?? properties.choicePokemon().find((instance) => instance.id === payload.pokemonId);
   if (pokemon === undefined || pokemon === null)
     return null;
-  const [hoveredOption, setHoveredOption] = createSignal6(null);
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
+  const [hoveredOption, setHoveredOption] = createSignal7(null);
   return (() => {
     var _el$4 = _$createElement7("box"), _el$5 = _$createElement7("text"), _el$6 = _$createElement7("text"), _el$7 = _$createElement7("box");
     _$insertNode7(_el$4, _el$5);
@@ -183498,6 +183718,10 @@ function EvolutionChoiceCard(properties) {
       get resolve() {
         return properties.resolveSprite;
       },
+      get protocol() {
+        return properties.imageProtocol;
+      },
+      theme: surface,
       get shiny() {
         return pokemon.shiny;
       },
@@ -183524,14 +183748,28 @@ function EvolutionChoiceCard(properties) {
       get resolveSprite() {
         return properties.resolveSprite;
       },
+      get imageProtocol() {
+        return properties.imageProtocol;
+      },
       get language() {
         return properties.language;
-      }
+      },
+      theme: surface
     })));
+    _$effect7((_p$) => {
+      var _v$3 = surface().text, _v$4 = surface().muted;
+      _v$3 !== _p$.e && (_p$.e = _$setProp7(_el$5, "fg", _v$3, _p$.e));
+      _v$4 !== _p$.t && (_p$.t = _$setProp7(_el$6, "fg", _v$4, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$4;
   })();
 }
 function EvolutionOptionCard(properties) {
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   return (() => {
     var _el$8 = _$createElement7("button"), _el$9 = _$createElement7("box"), _el$0 = _$createElement7("box"), _el$1 = _$createElement7("text");
     _$insertNode7(_el$8, _el$9);
@@ -183564,6 +183802,10 @@ function EvolutionOptionCard(properties) {
       get resolve() {
         return properties.resolveSprite;
       },
+      get protocol() {
+        return properties.imageProtocol;
+      },
+      theme: surface,
       get shiny() {
         return properties.pokemon.shiny;
       },
@@ -183580,19 +183822,21 @@ function EvolutionOptionCard(properties) {
     _$setProp7(_el$0, "width", "100%");
     _$insert7(_el$1, () => properties.option.name);
     _$effect7((_p$) => {
-      var _v$ = properties.hovered() ? "#404040" : undefined, _v$2 = properties.onHover, _v$3 = properties.onLeave, _v$4 = properties.onHover, _v$5 = properties.onLeave;
-      _v$ !== _p$.e && (_p$.e = _$setProp7(_el$8, "backgroundColor", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = _$setProp7(_el$8, "onMouseOver", _v$2, _p$.t));
-      _v$3 !== _p$.a && (_p$.a = _$setProp7(_el$8, "onMouseOut", _v$3, _p$.a));
-      _v$4 !== _p$.o && (_p$.o = _$setProp7(_el$8, "onFocus", _v$4, _p$.o));
-      _v$5 !== _p$.i && (_p$.i = _$setProp7(_el$8, "onBlur", _v$5, _p$.i));
+      var _v$5 = properties.hovered() ? surface().highlight : undefined, _v$6 = properties.onHover, _v$7 = properties.onLeave, _v$8 = properties.onHover, _v$9 = properties.onLeave, _v$0 = surface().text;
+      _v$5 !== _p$.e && (_p$.e = _$setProp7(_el$8, "backgroundColor", _v$5, _p$.e));
+      _v$6 !== _p$.t && (_p$.t = _$setProp7(_el$8, "onMouseOver", _v$6, _p$.t));
+      _v$7 !== _p$.a && (_p$.a = _$setProp7(_el$8, "onMouseOut", _v$7, _p$.a));
+      _v$8 !== _p$.o && (_p$.o = _$setProp7(_el$8, "onFocus", _v$8, _p$.o));
+      _v$9 !== _p$.i && (_p$.i = _$setProp7(_el$8, "onBlur", _v$9, _p$.i));
+      _v$0 !== _p$.n && (_p$.n = _$setProp7(_el$1, "fg", _v$0, _p$.n));
       return _p$;
     }, {
       e: undefined,
       t: undefined,
       a: undefined,
       o: undefined,
-      i: undefined
+      i: undefined,
+      n: undefined
     });
     return _el$8;
   })();
@@ -183604,7 +183848,8 @@ function RegionChoiceCard(properties) {
   const payload = decodeRegionChoiceProjection(choice.payload);
   if (payload === null)
     return null;
-  const [hoveredRegion, setHoveredRegion] = createSignal6(null);
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
+  const [hoveredRegion, setHoveredRegion] = createSignal7(null);
   const availableRegions = () => regions(properties.language?.() ?? "en");
   const completedRegionName = () => availableRegions().find((region) => region.id === payload.region)?.name ?? payload.region;
   return (() => {
@@ -183650,9 +183895,26 @@ function RegionChoiceCard(properties) {
         }
       });
       _$insert7(_el$15, () => region.name);
-      _$effect7((_$p) => _$setProp7(_el$14, "backgroundColor", hoveredRegion() === region.id ? "#404040" : undefined, _$p));
+      _$effect7((_p$) => {
+        var _v$11 = hoveredRegion() === region.id ? surface().highlight : undefined, _v$12 = surface().text;
+        _v$11 !== _p$.e && (_p$.e = _$setProp7(_el$14, "backgroundColor", _v$11, _p$.e));
+        _v$12 !== _p$.t && (_p$.t = _$setProp7(_el$15, "fg", _v$12, _p$.t));
+        return _p$;
+      }, {
+        e: undefined,
+        t: undefined
+      });
       return _el$14;
     })()));
+    _$effect7((_p$) => {
+      var _v$1 = surface().text, _v$10 = surface().muted;
+      _v$1 !== _p$.e && (_p$.e = _$setProp7(_el$11, "fg", _v$1, _p$.e));
+      _v$10 !== _p$.t && (_p$.t = _$setProp7(_el$12, "fg", _v$10, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$10;
   })();
 }
@@ -183669,6 +183931,7 @@ function EncounterCard(properties) {
   const encounter = properties.encounter();
   if (encounter === null)
     return null;
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   const genderSymbol = encounter.gender === "male" ? "\u2642" : encounter.gender === "female" ? "\u2640" : "\u2014";
   const copy = uiCopy(properties.language?.() ?? "en");
   return (() => {
@@ -183699,6 +183962,10 @@ function EncounterCard(properties) {
       get resolve() {
         return properties.resolveSprite;
       },
+      get protocol() {
+        return properties.imageProtocol;
+      },
+      theme: surface,
       get shiny() {
         return encounter.shiny;
       },
@@ -183720,6 +183987,7 @@ function EncounterCard(properties) {
       onActivate: () => properties.onResolve(encounter.id, encounter, true),
       onHover: () => properties.onHover("catch"),
       onLeave: () => properties.onHover(null),
+      theme: surface,
       tone: "primary"
     }), null);
     _$insert8(_el$6, _$createComponent9(PokecodeActionButton, {
@@ -183730,9 +183998,18 @@ function EncounterCard(properties) {
       onActivate: () => properties.onResolve(encounter.id, encounter, false),
       onHover: () => properties.onHover("run"),
       onLeave: () => properties.onHover(null),
+      theme: surface,
       tone: "secondary"
     }), null);
-    _$effect8((_$p) => _$setProp8(_el$3, "fg", properties.encounter()?.caught ? "#22c55e" : properties.mutedColor(), _$p));
+    _$effect8((_p$) => {
+      var _v$ = properties.encounter()?.caught ? surface().success : surface().muted, _v$2 = surface().text;
+      _v$ !== _p$.e && (_p$.e = _$setProp8(_el$3, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp8(_el$5, "fg", _v$2, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$;
   })();
 }
@@ -183755,6 +184032,7 @@ function sidebarViewFor(state) {
   return "team";
 }
 function SidebarView(properties) {
+  const surface = () => properties.theme().current;
   const view = () => sidebarViewFor(properties.state());
   const decisionCount = () => properties.state().pendingChoices.filter((choice) => choice.kind !== "catch").length;
   const encounterCount = () => properties.state().pendingEncounterCount;
@@ -183769,6 +184047,7 @@ function SidebarView(properties) {
       get children() {
         var _el$2 = _$createElement9("text");
         _$insert9(_el$2, () => uiCopy(properties.state().locale).queueCounts(decisionCount(), encounterCount()));
+        _$effect9((_$p) => _$setProp9(_el$2, "fg", surface().text, _$p));
         return _el$2;
       }
     }), null);
@@ -183783,9 +184062,6 @@ function SidebarView(properties) {
               get hovered() {
                 return properties.hoveredStarter;
               },
-              get hoverBackground() {
-                return properties.starterHoverBackground;
-              },
               language: () => properties.state().locale,
               regionId: () => {
                 const choice = properties.state().pendingChoices[0];
@@ -183799,7 +184075,11 @@ function SidebarView(properties) {
               },
               get resolveSprite() {
                 return properties.resolveSprite;
-              }
+              },
+              get imageProtocol() {
+                return properties.imageProtocol;
+              },
+              theme: surface
             });
           }
         }), _$createComponent10(Match2, {
@@ -183820,7 +184100,11 @@ function SidebarView(properties) {
               get resolveSprite() {
                 return properties.resolveSprite;
               },
-              language: () => properties.state().locale
+              get imageProtocol() {
+                return properties.imageProtocol;
+              },
+              language: () => properties.state().locale,
+              theme: surface
             });
           }
         }), _$createComponent10(Match2, {
@@ -183834,7 +184118,8 @@ function SidebarView(properties) {
               visitedRegionIds: () => properties.state().exploration?.regions.filter((region) => region.visited).map((region) => region.id) ?? [],
               get onTravel() {
                 return properties.onTravelRegion;
-              }
+              },
+              theme: surface
             });
           }
         }), _$createComponent10(Match2, {
@@ -183849,9 +184134,6 @@ function SidebarView(properties) {
               keyed: true,
               children: (encounter) => _$createComponent10(EncounterCard, {
                 encounter: () => encounter,
-                get mutedColor() {
-                  return properties.mutedColor;
-                },
                 get hoveredAction() {
                   return properties.hoveredEncounterAction;
                 },
@@ -183864,7 +184146,11 @@ function SidebarView(properties) {
                 get resolveSprite() {
                   return properties.resolveSprite;
                 },
-                language: () => properties.state().locale
+                get imageProtocol() {
+                  return properties.imageProtocol;
+                },
+                language: () => properties.state().locale,
+                theme: surface
               })
             });
           }
@@ -183879,13 +184165,18 @@ function SidebarView(properties) {
               },
               get onTravel() {
                 return properties.onTravelLocation;
-              }
+              },
+              theme: surface
             }), _$createComponent10(PartyGrid, {
               language: () => properties.state().locale,
               party: () => properties.state().party,
               get resolveSprite() {
                 return properties.resolveSprite;
-              }
+              },
+              get imageProtocol() {
+                return properties.imageProtocol;
+              },
+              theme: surface
             })];
           }
         })];
@@ -183895,6 +184186,7 @@ function SidebarView(properties) {
   })();
 }
 function StarterButtons(properties) {
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   return (() => {
     var _el$3 = _$createElement9("box"), _el$4 = _$createElement9("text");
     _$insertNode9(_el$3, _el$4);
@@ -183904,18 +184196,20 @@ function StarterButtons(properties) {
     _$insert9(_el$3, () => regions(properties.language?.() ?? "en").filter((region) => properties.regionId?.() === undefined || region.id === properties.regionId()).map((region) => _$createComponent10(StarterRegionCard, _$mergeProps(properties, {
       region
     }))), null);
+    _$effect9((_$p) => _$setProp9(_el$4, "fg", surface().accent, _$p));
     return _el$3;
   })();
 }
 function StarterRegionCard(properties) {
-  const [rowWidth, setRowWidth] = createSignal7(0);
+  const [rowWidth, setRowWidth] = createSignal8(0);
   const cellWidth = () => {
     const width = Math.max(1, Math.floor((rowWidth() - 2) / 3));
     return width % 2 === 0 ? width - 1 : width;
   };
   const columnGap = () => Math.min(3, Math.max(1, Math.floor((rowWidth() - cellWidth() * 3) / 2)));
   const gridInset = () => Math.max(0, Math.floor((rowWidth() - (cellWidth() * 3 + columnGap() * 2)) / 2));
-  const hoverBackground = () => typeof properties.hoverBackground === "function" ? properties.hoverBackground() : properties.hoverBackground;
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
+  const hoverBackground = () => surface().highlight;
   const starters = () => startersForRegion(properties.region.id, properties.language?.() ?? "en");
   return (() => {
     var _el$5 = _$createElement9("box"), _el$6 = _$createElement9("text"), _el$7 = _$createElement9("box"), _el$8 = _$createElement9("box");
@@ -183979,6 +184273,10 @@ function StarterRegionCard(properties) {
         get resolve() {
           return properties.resolveSprite;
         },
+        get protocol() {
+          return properties.imageProtocol;
+        },
+        theme: surface,
         shiny: false,
         gender: "male",
         get speciesId() {
@@ -183986,11 +184284,11 @@ function StarterRegionCard(properties) {
         }
       }));
       _$effect9((_p$) => {
-        var _v$3 = properties.hovered() === starter.speciesId ? hoverBackground() : undefined, _v$4 = cellWidth(), _v$5 = cellWidth() + 2, _v$6 = properties.hovered() === starter.speciesId ? hoverBackground() : "transparent";
-        _v$3 !== _p$.e && (_p$.e = _$setProp9(_el$9, "backgroundColor", _v$3, _p$.e));
-        _v$4 !== _p$.t && (_p$.t = _$setProp9(_el$9, "width", _v$4, _p$.t));
-        _v$5 !== _p$.a && (_p$.a = _$setProp9(_el$0, "width", _v$5, _p$.a));
-        _v$6 !== _p$.o && (_p$.o = _$setProp9(_el$0, "backgroundColor", _v$6, _p$.o));
+        var _v$4 = properties.hovered() === starter.speciesId ? hoverBackground() : undefined, _v$5 = cellWidth(), _v$6 = cellWidth() + 2, _v$7 = properties.hovered() === starter.speciesId ? hoverBackground() : "transparent";
+        _v$4 !== _p$.e && (_p$.e = _$setProp9(_el$9, "backgroundColor", _v$4, _p$.e));
+        _v$5 !== _p$.t && (_p$.t = _$setProp9(_el$9, "width", _v$5, _p$.t));
+        _v$6 !== _p$.a && (_p$.a = _$setProp9(_el$0, "width", _v$6, _p$.a));
+        _v$7 !== _p$.o && (_p$.o = _$setProp9(_el$0, "backgroundColor", _v$7, _p$.o));
         return _p$;
       }, {
         e: undefined,
@@ -184001,20 +184299,23 @@ function StarterRegionCard(properties) {
       return _el$9;
     })()));
     _$effect9((_p$) => {
-      var _v$ = columnGap(), _v$2 = gridInset();
-      _v$ !== _p$.e && (_p$.e = _$setProp9(_el$8, "gap", _v$, _p$.e));
-      _v$2 !== _p$.t && (_p$.t = _$setProp9(_el$8, "marginLeft", _v$2, _p$.t));
+      var _v$ = surface().accent, _v$2 = columnGap(), _v$3 = gridInset();
+      _v$ !== _p$.e && (_p$.e = _$setProp9(_el$6, "fg", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp9(_el$8, "gap", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp9(_el$8, "marginLeft", _v$3, _p$.a));
       return _p$;
     }, {
       e: undefined,
-      t: undefined
+      t: undefined,
+      a: undefined
     });
     return _el$5;
   })();
 }
 function LocationProgress(properties) {
   const state = properties.state;
-  const [hoveredTravel, setHoveredTravel] = createSignal7(false);
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
+  const [hoveredTravel, setHoveredTravel] = createSignal8(false);
   const currentLocation = () => state().exploration?.locations.find((location) => location.id === state().location)?.name ?? uiCopy(state().locale).unknown;
   const currentRegion = () => regions(state().locale).find((region) => region.id === state().region)?.name ?? uiCopy(state().locale).unknown;
   const latestUnlockedLocation = () => {
@@ -184049,6 +184350,7 @@ function LocationProgress(properties) {
       return () => _c$() ? (() => {
         var _el$14 = _$createElement9("text");
         _$insert9(_el$14, () => `${percentage().toFixed(2)}%`);
+        _$effect9((_$p) => _$setProp9(_el$14, "fg", surface().muted, _$p));
         return _el$14;
       })() : _$createComponent10(PokecodeActionButton, {
         hovered: hoveredTravel,
@@ -184058,9 +184360,21 @@ function LocationProgress(properties) {
         onActivate: travelToUnlockedLocation,
         onHover: () => setHoveredTravel(true),
         onLeave: () => setHoveredTravel(false),
+        get theme() {
+          return properties.theme;
+        },
         tone: "success"
       });
     })(), null);
+    _$effect9((_p$) => {
+      var _v$8 = surface().text, _v$9 = surface().muted;
+      _v$8 !== _p$.e && (_p$.e = _$setProp9(_el$11, "fg", _v$8, _p$.e));
+      _v$9 !== _p$.t && (_p$.t = _$setProp9(_el$13, "fg", _v$9, _p$.t));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
     return _el$10;
   })();
 }
@@ -184077,6 +184391,12 @@ function PartyGrid(properties) {
       get resolveSprite() {
         return properties.resolveSprite;
       },
+      get imageProtocol() {
+        return properties.imageProtocol;
+      },
+      get theme() {
+        return properties.theme;
+      },
       slots: () => occupiedSlots().slice(0, 2)
     }), null);
     _$insert9(_el$15, _$createComponent10(PartyRow, {
@@ -184086,6 +184406,12 @@ function PartyGrid(properties) {
       get resolveSprite() {
         return properties.resolveSprite;
       },
+      get imageProtocol() {
+        return properties.imageProtocol;
+      },
+      get theme() {
+        return properties.theme;
+      },
       slots: () => occupiedSlots().slice(2, 4)
     }), null);
     _$insert9(_el$15, _$createComponent10(PartyRow, {
@@ -184095,12 +184421,19 @@ function PartyGrid(properties) {
       get resolveSprite() {
         return properties.resolveSprite;
       },
+      get imageProtocol() {
+        return properties.imageProtocol;
+      },
+      get theme() {
+        return properties.theme;
+      },
       slots: () => occupiedSlots().slice(4, 6)
     }), null);
     return _el$15;
   })();
 }
 function PartyRow(properties) {
+  const surface = () => properties.theme?.() ?? fallbackPokecodeTheme.current;
   return (() => {
     var _el$16 = _$createElement9("box");
     _$setProp9(_el$16, "flexDirection", "row");
@@ -184120,6 +184453,10 @@ function PartyRow(properties) {
           get resolve() {
             return properties.resolveSprite;
           },
+          get protocol() {
+            return properties.imageProtocol;
+          },
+          theme: surface,
           get shiny() {
             return slot.pokemon.shiny;
           },
@@ -184132,10 +184469,12 @@ function PartyRow(properties) {
         }), (() => {
           var _el$18 = _$createElement9("text");
           _$insert9(_el$18, () => `${slot.pokemon.name} ${slot.pokemon.gender === "male" ? "\u2642" : slot.pokemon.gender === "female" ? "\u2640" : "\u2014"}`);
+          _$effect9((_$p) => _$setProp9(_el$18, "fg", surface().text, _$p));
           return _el$18;
         })(), (() => {
           var _el$19 = _$createElement9("text");
           _$insert9(_el$19, () => `Lv.${slot.pokemon.level}`);
+          _$effect9((_$p) => _$setProp9(_el$19, "fg", surface().muted, _$p));
           return _el$19;
         })()];
       })());
@@ -184156,9 +184495,7 @@ function registerPokemonSidebar(dependencies) {
       _$setProp10(_el$, "paddingTop", 1);
       _$setProp10(_el$, "gap", 1);
       _$insert10(_el$, _$createComponent11(SidebarTitle, {
-        get color() {
-          return dependencies.theme.base;
-        },
+        color: () => dependencies.theme().current.text,
         get title() {
           return copy().title;
         }
@@ -184200,9 +184537,6 @@ function registerPokemonSidebar(dependencies) {
         get hoverStarter() {
           return dependencies.setHoveredStarter;
         },
-        get mutedColor() {
-          return dependencies.theme.muted;
-        },
         get onChooseStarter() {
           return dependencies.actions.chooseStarter;
         },
@@ -184224,11 +184558,14 @@ function registerPokemonSidebar(dependencies) {
         get resolveSprite() {
           return dependencies.resolveSprite;
         },
+        get imageProtocol() {
+          return dependencies.imageProtocol;
+        },
         get setHoveredEncounterAction() {
           return dependencies.setHoveredEncounterAction;
         },
-        get starterHoverBackground() {
-          return dependencies.theme.muted;
+        get theme() {
+          return dependencies.theme;
         },
         get state() {
           return dependencies.state;
@@ -184272,6 +184609,7 @@ function createTuiCleanup(dependencies) {
     };
     runSynchronousDisposer(dependencies.unsubscribe);
     runSynchronousDisposer(dependencies.unregisterSlot);
+    runSynchronousDisposer(dependencies.disposeImageProtocol);
     const finish = () => {
       if (failures.length === 1)
         throw failures[0];
@@ -184311,7 +184649,7 @@ function createTuiCleanup(dependencies) {
 }
 
 // src/adapters/opencode/tui/state/coordinator.ts
-import { createSignal as createSignal8 } from "solid-js";
+import { createSignal as createSignal9 } from "solid-js";
 function initialTuiState() {
   return gameStateSchema.parse({
     phase: "onboarding",
@@ -184324,7 +184662,7 @@ function initialTuiState() {
   });
 }
 function createTuiStateCoordinator(initial, notify) {
-  const [state, setState] = createSignal8(initial);
+  const [state, setState] = createSignal9(initial);
   let disposed = false;
   return {
     state,
@@ -184373,11 +184711,12 @@ import { insert as _$insert11 } from "@opentui/solid";
 import { setProp as _$setProp11 } from "@opentui/solid";
 import { createElement as _$createElement11 } from "@opentui/solid";
 import { useKeyboard as useKeyboard3 } from "@opentui/solid";
-import { createSignal as createSignal9, For as For5, Show as Show6 } from "solid-js";
+import { createSignal as createSignal10, For as For5, Show as Show6 } from "solid-js";
 function LocationTravelDialog(properties) {
+  const surface = () => properties.theme?.().dialog ?? fallbackPokecodeTheme.dialog;
   const copy = () => uiCopy(properties.language);
   const initialLocationId = properties.locations.some((location) => location.id === properties.currentLocationId) ? properties.currentLocationId : properties.locations[0]?.id ?? "";
-  const [selectedLocationId, setSelectedLocationId] = createSignal9(initialLocationId);
+  const [selectedLocationId, setSelectedLocationId] = createSignal10(initialLocationId);
   let locationsScrollbox;
   let pokemonScrollbox;
   const selectedLocation = () => properties.locations.find((location) => location.id === selectedLocationId());
@@ -184441,9 +184780,7 @@ function LocationTravelDialog(properties) {
     _$insertNode10(_el$, _el$2);
     _$insertNode10(_el$, _el$3);
     _$insertNode10(_el$, _el$8);
-    _$setProp11(_el$, "backgroundColor", "#111827");
     _$setProp11(_el$, "border", true);
-    _$setProp11(_el$, "borderColor", "#4b5563");
     _$setProp11(_el$, "borderStyle", "rounded");
     _$setProp11(_el$, "flexDirection", "column");
     _$setProp11(_el$, "gap", 1);
@@ -184455,7 +184792,6 @@ function LocationTravelDialog(properties) {
     _$insert11(_el$2, () => copy().locationsDialog);
     _$insertNode10(_el$3, _el$4);
     _$insertNode10(_el$3, _el$5);
-    _$setProp11(_el$3, "backgroundColor", "#111827");
     _$setProp11(_el$3, "flexDirection", "row");
     _$setProp11(_el$3, "flexGrow", 1);
     _$setProp11(_el$3, "gap", 1);
@@ -184464,7 +184800,6 @@ function LocationTravelDialog(properties) {
     _$use4((renderable) => {
       locationsScrollbox = renderable;
     }, _el$4);
-    _$setProp11(_el$4, "backgroundColor", "#111827");
     _$setProp11(_el$4, "contentOptions", {
       flexDirection: "column"
     });
@@ -184492,6 +184827,7 @@ function LocationTravelDialog(properties) {
             var _el$0 = _$createElement11("text");
             _$setProp11(_el$0, "attributes", bold);
             _$insert11(_el$0, () => region.name);
+            _$effect11((_$p) => _$setProp11(_el$0, "fg", surface().accent, _$p));
             return _el$0;
           }
         }), null);
@@ -184509,9 +184845,9 @@ function LocationTravelDialog(properties) {
             _$setProp11(_el$1, "onMouseUp", () => selectLocation(location.id));
             _$insert11(_el$10, () => `${selectedLocationId() === location.id ? "\u203A " : "  "}${location.name}`);
             _$effect11((_p$) => {
-              var _v$ = `travel-location-${location.id}`, _v$2 = selectedLocationId() === location.id ? "#22c55e" : "#d1d5db";
-              _v$ !== _p$.e && (_p$.e = _$setProp11(_el$1, "id", _v$, _p$.e));
-              _v$2 !== _p$.t && (_p$.t = _$setProp11(_el$10, "fg", _v$2, _p$.t));
+              var _v$9 = `travel-location-${location.id}`, _v$0 = selectedLocationId() === location.id ? surface().accent : surface().text;
+              _v$9 !== _p$.e && (_p$.e = _$setProp11(_el$1, "id", _v$9, _p$.e));
+              _v$0 !== _p$.t && (_p$.t = _$setProp11(_el$10, "fg", _v$0, _p$.t));
               return _p$;
             }, {
               e: undefined,
@@ -184525,7 +184861,6 @@ function LocationTravelDialog(properties) {
     }));
     _$insertNode10(_el$5, _el$6);
     _$insertNode10(_el$5, _el$7);
-    _$setProp11(_el$5, "backgroundColor", "#111827");
     _$setProp11(_el$5, "flexDirection", "column");
     _$setProp11(_el$5, "flexGrow", 1);
     _$setProp11(_el$5, "minWidth", 0);
@@ -184536,7 +184871,6 @@ function LocationTravelDialog(properties) {
     _$use4((renderable) => {
       pokemonScrollbox = renderable;
     }, _el$7);
-    _$setProp11(_el$7, "backgroundColor", "#111827");
     _$setProp11(_el$7, "contentOptions", {
       flexDirection: "column"
     });
@@ -184557,6 +184891,7 @@ function LocationTravelDialog(properties) {
         return (() => {
           var _el$11 = _$createElement11("text");
           _$insert11(_el$11, () => copy().noLocationPokemon);
+          _$effect11((_$p) => _$setProp11(_el$11, "fg", surface().muted, _$p));
           return _el$11;
         })();
       },
@@ -184577,7 +184912,6 @@ function LocationTravelDialog(properties) {
                 _$insertNode10(_el$13, _el$14);
                 _$insertNode10(_el$13, _el$15);
                 _$setProp11(_el$13, "alignItems", "center");
-                _$setProp11(_el$13, "backgroundColor", "#111827");
                 _$setProp11(_el$13, "flexBasis", 0);
                 _$setProp11(_el$13, "flexDirection", "column");
                 _$setProp11(_el$13, "flexGrow", 1);
@@ -184597,6 +184931,10 @@ function LocationTravelDialog(properties) {
                   get resolve() {
                     return properties.resolveSprite;
                   },
+                  get protocol() {
+                    return properties.imageProtocol;
+                  },
+                  theme: surface,
                   shiny: false,
                   gender: "genderless",
                   get speciesId() {
@@ -184616,7 +184954,17 @@ function LocationTravelDialog(properties) {
                   var _c$ = _$memo7(() => pokemon.status === "unknown");
                   return () => _c$() ? "???" : pokemon.name;
                 })());
-                _$effect11((_$p) => _$setProp11(_el$16, "fg", pokemon.status === "caught" ? "#22c55e" : pokemon.status === "seen" ? "#9ca3af" : "#ffffff", _$p));
+                _$effect11((_p$) => {
+                  var _v$1 = surface().background, _v$10 = pokemon.status === "caught" ? surface().success : pokemon.status === "seen" ? surface().muted : surface().text, _v$11 = pokemon.status === "unknown" ? surface().muted : surface().text;
+                  _v$1 !== _p$.e && (_p$.e = _$setProp11(_el$13, "backgroundColor", _v$1, _p$.e));
+                  _v$10 !== _p$.t && (_p$.t = _$setProp11(_el$16, "fg", _v$10, _p$.t));
+                  _v$11 !== _p$.a && (_p$.a = _$setProp11(_el$17, "fg", _v$11, _p$.a));
+                  return _p$;
+                }, {
+                  e: undefined,
+                  t: undefined,
+                  a: undefined
+                });
                 return _el$13;
               })()
             }));
@@ -184636,6 +184984,7 @@ function LocationTravelDialog(properties) {
       onActivate: async () => properties.onClose(),
       onHover: () => {},
       onLeave: () => {},
+      theme: surface,
       tone: "secondary"
     }), null);
     _$insert11(_el$8, _$createComponent12(PokecodeActionButton, {
@@ -184646,8 +184995,30 @@ function LocationTravelDialog(properties) {
       onActivate: async () => travel(),
       onHover: () => {},
       onLeave: () => {},
+      theme: surface,
       tone: "success"
     }), null);
+    _$effect11((_p$) => {
+      var _v$ = surface().background, _v$2 = surface().border, _v$3 = surface().accent, _v$4 = surface().background, _v$5 = surface().background, _v$6 = surface().background, _v$7 = surface().accent, _v$8 = surface().background;
+      _v$ !== _p$.e && (_p$.e = _$setProp11(_el$, "backgroundColor", _v$, _p$.e));
+      _v$2 !== _p$.t && (_p$.t = _$setProp11(_el$, "borderColor", _v$2, _p$.t));
+      _v$3 !== _p$.a && (_p$.a = _$setProp11(_el$2, "fg", _v$3, _p$.a));
+      _v$4 !== _p$.o && (_p$.o = _$setProp11(_el$3, "backgroundColor", _v$4, _p$.o));
+      _v$5 !== _p$.i && (_p$.i = _$setProp11(_el$4, "backgroundColor", _v$5, _p$.i));
+      _v$6 !== _p$.n && (_p$.n = _$setProp11(_el$5, "backgroundColor", _v$6, _p$.n));
+      _v$7 !== _p$.s && (_p$.s = _$setProp11(_el$6, "fg", _v$7, _p$.s));
+      _v$8 !== _p$.h && (_p$.h = _$setProp11(_el$7, "backgroundColor", _v$8, _p$.h));
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined,
+      o: undefined,
+      i: undefined,
+      n: undefined,
+      s: undefined,
+      h: undefined
+    });
     return _el$;
   })();
 }
@@ -184719,6 +185090,12 @@ function createLocationTravelAction(dependencies) {
       },
       get resolveSprite() {
         return dependencies.resolveSprite;
+      },
+      get imageProtocol() {
+        return dependencies.imageProtocol;
+      },
+      get theme() {
+        return dependencies.theme;
       }
     })));
     dependencies.dialog.set({
@@ -184745,20 +185122,24 @@ function createPokemonTuiPlugin(dependencies = defaultDependencies) {
       let clipboard;
       let unsubscribe;
       let unregisterSlot;
+      let disposeImageProtocol;
       const cleanup = createTuiCleanup({
         state,
         unsubscribe: () => unsubscribe?.(),
         unregisterSlot: () => unregisterSlot?.(),
-        disposeClipboard: () => clipboard?.dispose()
+        disposeClipboard: () => clipboard?.dispose(),
+        disposeImageProtocol: () => disposeImageProtocol?.()
       });
       try {
         const rpc = createPokemonTuiClient(context.client.rpc(PokecodeRpc));
         clipboard = dependencies.createClipboard(context);
+        const imageProtocol = createImageProtocolState(context.renderer);
+        disposeImageProtocol = imageProtocol.dispose;
         const initialStatus = await rpc.status({});
         state.initialize(initialStatus);
         unsubscribe = rpc.onStatusChanged(state.apply);
-        const [hoveredStarter, setHoveredStarter] = createSignal10(null);
-        const [hoveredEncounterAction, setHoveredEncounterAction] = createSignal10(null);
+        const [hoveredStarter, setHoveredStarter] = createSignal11(null);
+        const [hoveredEncounterAction, setHoveredEncounterAction] = createSignal11(null);
         const resolveSprite = (speciesId, shiny, gender) => rpc.sprite({
           speciesId,
           shiny,
@@ -184769,11 +185150,14 @@ function createPokemonTuiPlugin(dependencies = defaultDependencies) {
           state,
           toast: (options) => context.ui.toast.show(options)
         });
+        const theme = () => toPokecodeTheme(context.theme);
         const chooseLocation = createLocationTravelAction({
           rpc,
           state,
           dialog: context.ui.dialog,
           resolveSprite,
+          imageProtocol: imageProtocol.protocol,
+          theme,
           travelToLocation: sidebarActions.travelToLocation
         });
         const showDex = createDexAction({
@@ -184785,11 +185169,9 @@ function createPokemonTuiPlugin(dependencies = defaultDependencies) {
           rpc,
           state,
           dialog: context.ui.dialog,
-          theme: {
-            base: () => context.theme.text.base,
-            muted: () => context.theme.text.muted
-          },
-          resolveSprite
+          theme,
+          resolveSprite,
+          imageProtocol: imageProtocol.protocol
         });
         const exportTeam = createExportAction({
           rpc,
@@ -184800,10 +185182,7 @@ function createPokemonTuiPlugin(dependencies = defaultDependencies) {
         unregisterSlot = (dependencies.registerSidebar ?? registerPokemonSidebar)({
           slot: context.ui.slot,
           state: state.state,
-          theme: {
-            base: () => context.theme.text.base,
-            muted: () => context.theme.text.muted
-          },
+          theme,
           hoveredStarter,
           setHoveredStarter,
           hoveredEncounterAction,
@@ -184813,7 +185192,8 @@ function createPokemonTuiPlugin(dependencies = defaultDependencies) {
           showDex,
           chooseParty,
           exportTeam,
-          resolveSprite
+          resolveSprite,
+          imageProtocol: imageProtocol.protocol
         });
         return cleanup;
       } catch (error) {