@kevin5251984/guild 0.2.12 → 0.2.14

package/src/public/style.css

@@ -16,7 +16,12 @@
   --accent: #A8B0BC;
   --ok: #9fdfb2;
   --err: #fca5a5;
+  --danger: #f0a8a8;
   --radius: 14px;
+  --press: 0.97;
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --press-ms: 140ms;
+  --hover-ms: 160ms;
   --focus: 0 0 0 2px var(--bg), 0 0 0 3px var(--steel);
   color: var(--text);
   background: var(--bg);
@@ -88,6 +93,7 @@ select:focus-visible {
 }
 .locale-switch button.on,
 .locale-switch button:hover { background: var(--lift); color: var(--text); }
+.locale-switch button:active:not(:disabled) { transform: scale(var(--press)); }
 
 body.app {
   display: grid;
@@ -329,6 +335,19 @@ button {
   border: 0;
   border-radius: 999px;
   cursor: pointer;
+  transition:
+    background-color var(--hover-ms) ease,
+    border-color var(--hover-ms) ease,
+    color var(--hover-ms) ease,
+    transform var(--press-ms) var(--ease-out),
+    opacity var(--hover-ms) ease;
+}
+/* :where keeps this weaker than tavern / steel / ghost rules. */
+button:where(:hover):where(:not(:disabled)) {
+  background: color-mix(in srgb, var(--paper) 88%, white);
+}
+button:where(:active):where(:not(:disabled)) {
+  transform: scale(var(--press));
 }
 button.secondary {
   background: transparent;
@@ -336,31 +355,15 @@ button.secondary {
   border: 1px solid var(--line);
   margin-top: 0.55rem;
 }
+button.secondary:hover:not(:disabled) {
+  background: var(--lift);
+  color: var(--text);
+}
 button.danger {
-  color: #fca5a5;
+  color: var(--danger);
   border-color: #4a2a2a;
 }
 button:disabled { opacity: 0.45; }
-button.is-busy:disabled {
-  opacity: 1;
-  cursor: wait;
-  pointer-events: none;
-}
-button.is-busy::after {
-  content: "";
-  display: inline-block;
-  width: 0.7em;
-  height: 0.7em;
-  margin-left: 0.45em;
-  border: 1.5px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  vertical-align: -0.12em;
-  animation: btn-spin 0.7s linear infinite;
-}
-@keyframes btn-spin {
-  to { transform: rotate(360deg); }
-}
 
 .grid { display: grid; gap: 1rem; }
 @media (min-width: 760px) {
@@ -523,7 +526,10 @@ button.is-busy::after {
   background: var(--fill);
   color: var(--muted);
   font-size: 0.85rem;
+  transition: background-color var(--hover-ms) ease, color var(--hover-ms) ease, transform var(--press-ms) var(--ease-out);
 }
+.chip:hover:not(.on) { color: var(--text); background: var(--lift); }
+.chip:active { transform: scale(var(--press)); }
 .chip.on { background: var(--paper); color: var(--ink); }
 .chip-n {
   opacity: 0.55;
@@ -547,8 +553,10 @@ button.is-busy::after {
   font: inherit;
   font-size: 0.72rem;
   cursor: pointer;
+  transition: background-color var(--hover-ms) ease, color var(--hover-ms) ease, transform var(--press-ms) var(--ease-out);
 }
 .mini-tag:hover { color: var(--text); background: var(--lift); }
+.mini-tag:active { transform: scale(var(--press)); }
 .mini-tag.on { background: var(--paper); color: var(--ink); }
 
 .more {
@@ -652,13 +660,15 @@ a.btn {
   margin: 0;
   padding: 0.55rem 0.95rem;
   font-weight: 560;
-  color: #111;
-  background: var(--text);
+  color: var(--ink);
+  background: var(--paper);
   border-radius: 999px;
   text-decoration: none;
   white-space: nowrap;
+  transition: background-color var(--hover-ms) ease, transform var(--press-ms) var(--ease-out);
 }
-a.btn:hover { text-decoration: none; opacity: 0.92; }
+a.btn:hover { text-decoration: none; background: color-mix(in srgb, var(--paper) 88%, white); }
+a.btn:active { transform: scale(var(--press)); }
 
 .lib-card {
   display: grid;
@@ -933,12 +943,13 @@ a.btn:hover { text-decoration: none; opacity: 0.92; }
   font: inherit;
   font-size: 0.86rem;
   cursor: pointer;
+  transition: background-color var(--hover-ms) ease, border-color var(--hover-ms) ease, color var(--hover-ms) ease, transform var(--press-ms) var(--ease-out);
 }
-.key-tab:hover { color: var(--text); border-color: #333; }
+.key-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--steel) 45%, var(--line)); background: var(--lift); }
 .key-tab.on {
-  background: #1c1c1c;
+  background: var(--lift);
   color: var(--text);
-  border-color: #3a3a3a;
+  border-color: color-mix(in srgb, var(--steel) 45%, var(--line));
 }
 .key-tab.add {
   border-style: dashed;
@@ -947,12 +958,13 @@ a.btn:hover { text-decoration: none; opacity: 0.92; }
 }
 .key-tab.add:hover {
   color: var(--text);
-  border-color: #555;
+  border-color: color-mix(in srgb, var(--steel) 45%, var(--line));
   background: var(--fill);
 }
+.key-tab:active:not(:disabled) { transform: scale(var(--press)); }
 .key-tab:focus { outline: none; }
 .key-tab:focus-visible {
-  box-shadow: 0 0 0 2px #000, 0 0 0 4px #6a6a6a;
+  box-shadow: var(--focus);
 }
 .key-tab .badge { margin-left: 0.15rem; }
 dialog.pick.add-provider { width: min(32rem, 92vw); }
@@ -976,13 +988,13 @@ dialog.pick.add-provider { width: min(32rem, 92vw); }
   cursor: pointer;
 }
 .preset-grid button:hover {
-  border-color: #3a3a3a;
-  background: #1c1c1c;
+  border-color: color-mix(in srgb, var(--steel) 45%, var(--line));
+  background: var(--lift);
 }
+.preset-grid button:active:not(:disabled) { transform: scale(var(--press)); }
 .preset-grid button:focus { outline: none; }
 .preset-grid button:focus-visible {
-  border-color: #6a6a6a;
-  box-shadow: 0 0 0 2px #000, 0 0 0 4px #5a5a5a;
+  box-shadow: var(--focus);
 }
 .preset-grid button[data-preset="custom"] { grid-column: 1 / -1; }
 .preset-grid button .hint {
@@ -1072,28 +1084,15 @@ body.app.bar-page .shell {
   padding: 0 0 0.4rem;
 }
 .rpg-screen {
-  display: grid;
-  grid-template-rows: auto auto;
   position: relative;
+  aspect-ratio: 16 / 9;
   overflow: hidden;
   background: #000;
   border: 4px solid #0a0a12;
   box-shadow: 8px 8px 0 #000;
   image-rendering: pixelated;
 }
-body.bar-page .rpg-screen {
-  background: #1a1410;
-  border-color: #1a1410;
-  box-shadow: 8px 8px 0 #1a1410;
-}
-.rpg-scene {
-  grid-row: 1;
-  grid-column: 1;
-  position: relative;
-  aspect-ratio: 16 / 9;
-  min-height: 0;
-  overflow: hidden;
-}
+.rpg-scene { position: absolute; inset: 0; }
 .rpg-scene[hidden] { display: none; }
 .rpg-bg {
   display: block;
@@ -1135,216 +1134,120 @@ body.bar-page .rpg-screen {
 .inn-map {
   position: absolute;
   inset: 0;
-  background-color: #3d6b52;
-  background-image: repeating-conic-gradient(#3d6b52 0% 25%, #335c46 0% 50%);
-  background-size: 16px 16px;
+  background-color: #3f3f48;
+  background-image:
+    linear-gradient(#2a1812 0 70px, transparent 70px),
+    repeating-linear-gradient(90deg, transparent 0 15px, #35353c 15px 16px),
+    repeating-linear-gradient(transparent 0 15px, #35353c 15px 16px);
 }
 .inn-wall {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
-  height: 56px;
-  display: flex;
-  align-items: flex-end;
-  justify-content: center;
-  gap: 28px;
-  padding: 0 12px 8px;
+  height: 70px;
   background:
-    linear-gradient(#1c2a44 0 14px, transparent 14px),
-    repeating-linear-gradient(#6b5340 0 14px, #5a4534 14px 16px);
-  box-shadow: inset 0 -4px 0 #1a1410;
-  z-index: 1;
+    repeating-linear-gradient(90deg, #3a2218 0 40px, #2a1812 40px 44px),
+    linear-gradient(#4a2c20, #2a1812);
+  box-shadow: inset 0 -6px 0 #1a100c;
 }
-.inn-window {
-  width: 42px;
-  height: 28px;
-  background:
-    linear-gradient(#0b1020 0 5px, transparent 5px) 0 12px / 100% 2px no-repeat,
-    linear-gradient(90deg, #0b1020 0 2px, transparent 2px) 20px 0 / 2px 100% no-repeat,
-    linear-gradient(#2a3a6a, #12182c);
-  box-shadow: inset 0 0 0 3px #2a2118, 0 0 0 2px #1a1410;
-}
-.inn-nook {
+.inn-rail {
   position: absolute;
-  top: 56px;
-  bottom: 0;
-  width: 56px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-evenly;
-  z-index: 1;
-  background:
-    repeating-linear-gradient(90deg, #2a4638 0 14px, #244032 14px 16px);
-  background-size: 16px 16px;
-}
-.inn-nook-l { left: 0; border-right: 2px solid #1a2a22; }
-.inn-nook-r { right: 0; border-left: 2px solid #1a2a22; }
-.inn-prop.plant {
-  width: 28px;
-  height: 36px;
-  background:
-    linear-gradient(#3d8c4a 0 14px, transparent 14px),
-    linear-gradient(#8a5a32 0 100%);
-  background-position: center 0, center 16px;
-  background-repeat: no-repeat;
-  background-size: 18px 16px, 8px 20px;
+  left: 0;
+  right: 0;
+  top: 64px;
+  height: 10px;
+  background: #6b4228;
+  box-shadow: 0 4px 0 #3a2414;
 }
 .inn-bar {
-  width: 36px;
-  height: 48%;
+  position: absolute;
+  right: 4%;
+  top: 18%;
+  width: 20%;
+  height: 62%;
   background: #6b3e22;
-  box-shadow: inset 0 0 0 3px #4a2814, 4px 4px 0 #2a160e;
+  box-shadow: inset 0 0 0 4px #4a2814, 6px 6px 0 #2a160e;
 }
 .inn-bottles {
+  position: absolute;
+  right: 6%;
+  top: 12%;
   display: flex;
-  gap: 4px;
+  gap: 6px;
   align-items: flex-end;
-  height: 22px;
+  height: 28px;
+  z-index: 1;
 }
 .inn-bottles span {
-  width: 6px;
-  height: 16px;
-  box-shadow: 0 -4px 0 -2px #e8e8e8;
+  width: 7px;
+  height: 18px;
+  box-shadow: 0 -5px 0 -2px #e8e8e8;
 }
-.inn-actors {
+.inn-table {
   position: absolute;
-  top: 56px;
-  left: 56px;
-  right: 56px;
-  bottom: 0;
-  z-index: 2;
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  align-content: start;
-  justify-items: center;
-  gap: 12px 6px;
-  padding: 22px 0 10px;
-  overflow: auto;
-}
-.inn-station {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 88px;
-  z-index: 2;
-}
-@media (max-width: 720px) {
-  .inn-actors {
-    left: 8px;
-    right: 8px;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-@media (max-width: 480px) {
-  .inn-actors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-}
-.inn-desk {
-  order: 2;
-  position: relative;
-  width: 72px;
-  height: 20px;
-  margin-top: -8px;
-  background: #8a5a32;
-  box-shadow: 0 3px 0 #6a4020, 0 5px 0 #3a2414, inset 0 2px 0 #b07a48;
-  z-index: 1;
+  width: 56px;
+  height: 36px;
+  background: #7a4a28;
+  box-shadow: 8px 10px 0 -4px #3a2414, inset 0 0 0 3px #5a3218;
+  border-radius: 40% 40% 30% 30%;
 }
-.inn-monitor {
+.inn-table.t1 { left: 10%; top: 28%; }
+.inn-table.t2 { left: 28%; top: 22%; }
+.inn-barrel {
   position: absolute;
-  left: 50%;
-  bottom: 14px;
   width: 28px;
-  height: 18px;
-  margin-left: -14px;
-  background: #1a1a1a;
-  box-shadow: 0 0 0 2px #111;
-}
-.inn-monitor::after {
-  content: "";
+  height: 32px;
+  background: repeating-linear-gradient(#8a5a32 0 6px, #5a3218 6px 8px);
+  border-radius: 40%;
+  box-shadow: 3px 3px 0 #1a1008;
+}
+.inn-barrel.b1 { left: 6%; bottom: 28%; }
+.inn-barrel.b2 { left: 72%; top: 24%; }
+.inn-hearth {
   position: absolute;
-  inset: 3px 3px 4px;
-  background: repeating-linear-gradient(#7ec8e8 0 2px, #4aa3c8 2px 4px);
+  left: 4%;
+  top: 8%;
+  width: 54px;
+  height: 48px;
+  background: #2a1c18;
+  box-shadow: inset 0 0 0 4px #1a100c, inset 0 0 12px #e07020;
 }
-.inn-station:has(.rpg-npc.vacant) .inn-monitor::after { background: #2a2a2a; }
+.inn-actors { position: absolute; inset: 0; z-index: 2; }
 .rpg-npc {
-  position: relative;
+  position: absolute;
   display: flex;
   flex-direction: column;
   align-items: center;
-  order: 1;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
   color: inherit;
+  transform: translate(-50%, -88%);
   cursor: pointer;
   z-index: 2;
 }
-.rpg-npc .npc-bust,
-.rpg-npc .npc-blank {
-  width: 72px;
+.rpg-npc canvas {
+  width: 48px;
   height: 72px;
-  box-sizing: border-box;
-  border: 3px solid #1a1410;
-  background: #2a2118;
-  box-shadow: 2px 3px 0 #0006;
-}
-.rpg-npc .npc-bust {
-  object-fit: cover;
-  object-position: center 18%;
-  display: block;
-}
-.rpg-npc .npc-blank {
-  display: grid;
-  place-items: center;
-  color: #f0d9a0;
-  font-family: VT323, ui-monospace, monospace;
-  font-size: 28px;
-  line-height: 1;
-}
-.rpg-npc.drawing .npc-bust,
-.rpg-npc.drawing .npc-blank {
-  filter: brightness(1.25) drop-shadow(0 0 6px #f0d060);
+  image-rendering: pixelated;
+  filter: drop-shadow(2px 3px 0 #0008);
+  animation: bob 1.1s steps(2) infinite;
 }
 .rpg-npc .tag {
-  order: 3;
-  margin-top: 6px;
+  margin-top: 2px;
   padding: 1px 5px;
-  background: #1a1410;
-  color: #f0d9a0;
+  background: #000c;
+  color: #f4f0e0;
   font-family: VT323, ui-monospace, monospace;
   font-size: 15px;
   line-height: 1.1;
   white-space: nowrap;
-  z-index: 3;
-}
-.npc-state {
-  position: absolute;
-  top: 0;
-  left: 50%;
-  z-index: 4;
-  padding: 0 5px;
-  border: 0;
-  background: #f4ead7;
-  color: #1a1410;
-  font-family: VT323, ui-monospace, monospace;
-  font-size: 14px;
-  line-height: 1.2;
-  white-space: nowrap;
-  box-shadow: 2px 2px 0 #1a1410;
-  transform: translate(-50%, calc(-100% - 4px));
-}
-.npc-state.live {
-  background: var(--signal);
-  color: #1a1410;
 }
-.rpg-npc:hover .npc-bust,
-.rpg-npc:hover .npc-blank { filter: brightness(1.18) drop-shadow(0 0 6px #f0d060); }
-.rpg-npc.on .npc-bust,
-.rpg-npc.on .npc-blank { outline: 2px solid #f0d060; outline-offset: 1px; }
-.rpg-npc.vacant .npc-blank { opacity: 0.55; }
+.rpg-npc:hover canvas { filter: brightness(1.18) drop-shadow(0 0 6px #f0d060); }
+.rpg-npc.on canvas { outline: 2px solid #f0d060; outline-offset: 1px; }
+.rpg-npc.vacant canvas { opacity: 0.35; }
 .rpg-npc.vacant .tag { color: #f0d060; }
 .rpg-exit {
   position: absolute;
@@ -1361,47 +1264,26 @@ body.bar-page .rpg-screen {
   cursor: pointer;
 }
 .rpg-exit:hover { background: #2a3460; }
-body.bar-page .rpg-exit {
-  border-color: #1a1410;
-  background: #f4ead7;
-  color: #1a1410;
+.rpg-npc:hover { background: transparent; }
+.rpg-exit:active,
+.rpg-npc:active {
+  transform: none;
 }
-body.bar-page .rpg-exit:hover { background: #e8dcc4; }
 .rpg-dialog {
-  grid-row: 2;
-  position: relative;
+  position: absolute;
+  left: 3.5%;
+  right: 3.5%;
+  bottom: 3%;
   z-index: 5;
-  margin: 8px 12px 10px;
   padding: 3px;
   background: #08080f;
   box-shadow: 0 0 0 2px #c9a227, inset 0 0 0 2px #3a4a8a;
 }
-body.bar-page .rpg-dialog {
-  background: #1a1410;
-  box-shadow: 0 0 0 3px #1a1410, 4px 4px 0 #1a1410;
-}
 .rpg-dialog-inner {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
   min-height: 92px;
   padding: 10px 14px 8px;
   background: linear-gradient(#2a3668, #1a2248 55%, #141a3a);
 }
-.rpg-face {
-  flex: none;
-  width: 56px;
-  height: 56px;
-  object-fit: cover;
-  object-position: center 18%;
-  border: 3px solid #1a1410;
-  background: #2a2118;
-}
-.rpg-face[hidden] { display: none; }
-.rpg-copy { min-width: 0; flex: 1; }
-body.bar-page .rpg-dialog-inner {
-  background: #f4ead7;
-}
 .rpg-name {
   margin: 0 0 6px;
   color: #f0d060;
@@ -1416,44 +1298,31 @@ body.bar-page .rpg-dialog-inner {
   font-family: VT323, ui-monospace, monospace;
   font-size: 22px;
   line-height: 1.2;
-  overflow-wrap: anywhere;
 }
-body.bar-page .rpg-name { color: #6b4228; }
-body.bar-page .rpg-line { color: #1a1410; }
 .rpg-acts {
   display: flex;
-  flex-wrap: wrap;
   gap: 8px;
   margin-top: 8px;
   min-height: 22px;
 }
 .rpg-acts a,
 .rpg-acts button {
-  appearance: none;
   margin: 0;
   padding: 3px 8px;
   border: 2px solid #c9a227;
-  border-radius: 0;
   background: #141a3a;
   color: #f4f0e0;
   font-family: VT323, ui-monospace, monospace;
   font-size: 18px;
-  font-weight: 400;
-  line-height: 1.2;
   text-decoration: none;
-  box-shadow: none;
   cursor: pointer;
 }
 .rpg-acts a:hover,
 .rpg-acts button:hover { background: #2a3460; text-decoration: none; }
-body.bar-page .rpg-acts a,
-body.bar-page .rpg-acts button {
-  border-color: #1a1410;
-  background: #f4ead7;
-  color: #1a1410;
+.rpg-acts a:active,
+.rpg-acts button:active {
+  transform: none;
 }
-body.bar-page .rpg-acts a:hover,
-body.bar-page .rpg-acts button:hover { background: #e8dcc4; }
 
 body.office-page {
   background: #1a1714;
@@ -1575,7 +1444,7 @@ body.office-page {
     inset 0 2px 0 #b07a48;
   position: relative;
   z-index: 2;
-  margin-top: -40px;
+  margin-top: -28px;
 }
 .monitor {
   position: absolute;
@@ -1594,8 +1463,8 @@ body.office-page {
   background: repeating-linear-gradient(#7ec8e8 0 2px, #4aa3c8 2px 4px);
 }
 .buddy {
-  width: 72px;
-  height: 128px;
+  width: 64px;
+  height: 96px;
   position: relative;
   z-index: 1;
   image-rendering: pixelated;
@@ -1676,3 +1545,24 @@ body.office-page {
   }
   .nook { flex-direction: row; justify-content: center; gap: 2rem; min-height: 64px; }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  button,
+  .chip,
+  .mini-tag,
+  a.btn,
+  .key-tab,
+  .preset-grid button,
+  .locale-switch button {
+    transition: none;
+  }
+  button:active:not(:disabled),
+  .chip:active,
+  .mini-tag:active,
+  a.btn:active,
+  .key-tab:active,
+  .preset-grid button:active,
+  .locale-switch button:active {
+    transform: none;
+  }
+}

package/src/public/subagents-add.html

@@ -91,12 +91,7 @@
           return;
         }
         const button = document.getElementById("ai-generate");
-        if (button.disabled || button.getAttribute("aria-busy") === "true") return;
         button.disabled = true;
-        button.setAttribute("aria-busy", "true");
-        button.classList.add("is-busy");
-        const idle = button.textContent;
-        button.textContent = t("studio.generating");
         try {
           const response = await fetch("/generate", {
             method: "POST",
@@ -120,9 +115,6 @@
           setFlash("error", err.message);
         } finally {
           button.disabled = false;
-          button.removeAttribute("aria-busy");
-          button.classList.remove("is-busy");
-          button.textContent = idle;
         }
       });
       document.getElementById("ai-save").addEventListener("click", async () => {

package/src/router.ts

@@ -18,7 +18,6 @@ import {
   setChannelMemory,
   generateKind,
   pickBotSkills,
-  generateBotLook,
   getBotDetail,
   getLiveTurn,
   abortLiveTurn,
@@ -78,7 +77,6 @@ const PAGES: Record<string, { file: string; type: string }> = {
   "/chat.css": { file: "chat.css", type: "text/css; charset=utf-8" },
   "/md.js": { file: "md.js", type: "text/javascript; charset=utf-8" },
   "/i18n.js": { file: "i18n.js", type: "text/javascript; charset=utf-8" },
-  "/buddy.js": { file: "buddy.js", type: "text/javascript; charset=utf-8" },
   "/favicon.ico": { file: "favicon.ico", type: "image/x-icon" },
   "/favicon.svg": { file: "favicon.svg", type: "image/svg+xml" },
   "/favicon-16.svg": { file: "favicon-16.svg", type: "image/svg+xml" },
@@ -893,12 +891,6 @@ export async function handleRequest(
       return;
     }
 
-    const lookId = path.match(/^\/bots\/([^/]+)\/look$/)?.[1];
-    if (lookId && method === "POST") {
-      json(res, 200, await generateBotLook(store, decodeURIComponent(lookId), env));
-      return;
-    }
-
     const botId = path.match(/^\/bots\/([^/]+)$/)?.[1];
     if (botId && method === "GET") {
       json(res, 200, getBotDetail(store, botId));
@@ -914,9 +906,6 @@ export async function handleRequest(
         name: str(body, "name") || undefined,
         handle: str(body, "handle") || undefined,
         oneLiner: str(body, "oneLiner") || undefined,
-        ...(Object.hasOwn(body, "portrait")
-          ? { portrait: body.portrait == null ? null : str(body, "portrait") }
-          : {}),
         skillIds: Object.hasOwn(body, "skillIds")
           ? strList(body, "skillIds")
           : undefined,