@linxin666/dsh-pet 0.1.11 → 0.1.13

package/src/client/PluginSettingsCard.tsx

@@ -41,13 +41,14 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
   if (!state.available) return null
   const title = props.t(props.titleKey)
   const blocked = !state.dirty || state.invalid || state.saving
+  const cardClass = open ? `${css.cardOpen} ${css.card}` : css.card
   // The namespace exists but the Host does not serve it to this client (the
   // official settings allowlist omits third-party namespaces): show a card
   // that explains the gap instead of vanishing, so a missing card never
   // reads as a missing plugin.
   if (!state.exposed) {
     return (
-      <li className={css.card}>
+      <li className={cardClass}>
         <button
           type="button"
           className={css.header}
@@ -59,7 +60,19 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
             <span className={css.name}>{title}</span>
             <span className={css.description}>{props.t(props.descriptionKey)}</span>
           </span>
-          <span className={open ? css.chevronOpen : css.chevron}>▾</span>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
+          >
+            <path
+              d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+              fill="currentColor"
+            />
+          </svg>
         </button>
         {open
           ? (
@@ -72,7 +85,7 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
     )
   }
   return (
-    <li className={css.card}>
+    <li className={cardClass}>
       <button
         type="button"
         className={css.header}
@@ -85,7 +98,19 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
           <span className={css.description}>{props.t(props.descriptionKey)}</span>
         </span>
         {state.dirty ? <span className={css.pending}>{props.t('settings.unsaved')}</span> : null}
-        <span className={open ? css.chevronOpen : css.chevron}>▾</span>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
+        >
+          <path
+            d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+            fill="currentColor"
+          />
+        </svg>
       </button>
       {open
         ? (
@@ -234,4 +259,4 @@ export function BooleanField(props: FieldProps & {
       <p className={css.hint}>{props.hint}</p>
     </div>
   )
-}
+}

package/src/client/WhalePet.test.tsx

@@ -0,0 +1,138 @@
+// @vitest-environment jsdom
+/**
+ * WhalePet rename-box keyboard handling. The rename input must treat
+ * Enter/Escape keydowns that arrive during IME composition (candidate
+ * selection) as composition input, never as submit/cancel (issue #89).
+ */
+import { afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { WhalePet, type WhalePetProps } from './WhalePet.tsx'
+import { t } from './locales.ts'
+import type { PetStateView } from '../service.ts'
+
+/** Snapshot fixture: idle whale girl named 泡泡. */
+const snapshot: PetStateView = {
+  animation: 'idle',
+  phase: 'idle',
+  sessionActive: true,
+  affinity: {
+    points: 0,
+    rank: '幼鲸',
+    rankEmoji: '*',
+    pets: 0,
+    feeds: 0,
+    turns: 0,
+    petCooldown: false,
+    feedCooldown: false,
+  },
+  display: { visible: true, size: 160, right: 24, bottom: 20 },
+  name: '泡泡',
+  treats: { stocked: 3, max: 5 },
+}
+
+beforeAll(() => {
+  // Deterministic zh copy for button labels.
+  document.documentElement.lang = 'zh'
+  // Prefer-reduced-motion matches: the sprite loop then never schedules
+  // requestAnimationFrame, keeping the test free of animation timers.
+  Object.defineProperty(window, 'matchMedia', {
+    configurable: true,
+    value: (query: string) => ({
+      matches: query.includes('prefers-reduced-motion'),
+      media: query,
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  })
+})
+
+afterEach(() => {
+  cleanup()
+})
+
+/** Render the pet with mocked callbacks; returns the rename spy. */
+function renderPet(): { onRename: ReturnType<typeof vi.fn> } {
+  const onRename = vi.fn()
+  const props: WhalePetProps = {
+    snapshot,
+    display: snapshot.display,
+    feedback: null,
+    onPet: vi.fn(),
+    onFeed: vi.fn(),
+    onHide: vi.fn(),
+    onDragEnd: vi.fn(),
+    onRename,
+    onFeedbackDone: vi.fn(),
+    t,
+  }
+  render(<WhalePet {...props} />)
+  return { onRename }
+}
+
+/** Hover the sprite to open the panel, then click the rename button. */
+function openRename(): HTMLInputElement {
+  fireEvent.pointerOver(screen.getByRole('button', { name: 'whale girl' }))
+  fireEvent.click(screen.getByText('改名'))
+  return screen.getByPlaceholderText('输入新名字') as HTMLInputElement
+}
+
+/**
+ * Fire a keydown whose native event reports an active IME composition, the
+ * way Chromium marks Enter/Escape pressed to select or dismiss a candidate.
+ */
+function fireComposingKeydown(target: Element, key: string): void {
+  fireEvent.compositionStart(target)
+  const native = new window.KeyboardEvent('keydown', {
+    key,
+    bubbles: true,
+    cancelable: true,
+    isComposing: true,
+  })
+  // jsdom does not implement KeyboardEvent.isComposing, so pin the flag on
+  // the dispatched native event exactly as the browser would report it.
+  Object.defineProperty(native, 'isComposing', { value: true })
+  fireEvent(target, native)
+  fireEvent.compositionEnd(target)
+}
+
+describe('WhalePet rename input', () => {
+  it('submits the draft on Enter outside composition', () => {
+    const { onRename } = renderPet()
+    const input = openRename()
+    fireEvent.change(input, { target: { value: ' 小鲸 ' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onRename).toHaveBeenCalledTimes(1)
+    expect(onRename).toHaveBeenCalledWith('小鲸')
+    expect(screen.queryByPlaceholderText('输入新名字')).toBeNull()
+  })
+
+  it('ignores Enter while an IME composition is active', () => {
+    const { onRename } = renderPet()
+    const input = openRename()
+    fireEvent.change(input, { target: { value: '泡泡酱' } })
+    fireComposingKeydown(input, 'Enter')
+    expect(onRename).not.toHaveBeenCalled()
+    expect(screen.getByPlaceholderText('输入新名字')).toBe(input)
+    expect(input.value).toBe('泡泡酱')
+    // Once the composition is over, Enter submits normally.
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onRename).toHaveBeenCalledWith('泡泡酱')
+    expect(screen.queryByPlaceholderText('输入新名字')).toBeNull()
+  })
+
+  it('ignores Escape while an IME composition is active', () => {
+    const { onRename } = renderPet()
+    const input = openRename()
+    fireEvent.change(input, { target: { value: 'abc' } })
+    fireComposingKeydown(input, 'Escape')
+    expect(screen.getByPlaceholderText('输入新名字')).toBe(input)
+    // A real Escape outside composition closes the box without renaming.
+    fireEvent.keyDown(input, { key: 'Escape' })
+    expect(onRename).not.toHaveBeenCalled()
+    expect(screen.queryByPlaceholderText('输入新名字')).toBeNull()
+  })
+})

package/src/client/WhalePet.tsx

@@ -301,6 +301,11 @@ export function WhalePet(props: WhalePetProps): ReactPortal {
                 autoFocus
                 onChange={(e) => setNameDraft(e.target.value)}
                 onKeyDown={(e) => {
+                  // While an IME composition is active (e.g. selecting a
+                  // Chinese candidate), Enter/Escape keydowns belong to the
+                  // input method: ignore them so candidate selection can
+                  // neither submit the draft nor close the rename box.
+                  if (e.nativeEvent.isComposing) return
                   if (e.key === 'Enter') {
                     const trimmed = nameDraft.trim()
                     if (trimmed !== '') {

package/src/client/index.ts

@@ -10,7 +10,7 @@
  * @module @linxin666/dsh-pet/client
  */
 
-import type { ClientContext } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ClientContext, SettingsScope, SettingsScopeSpec } from '@deepseek-ai/dsh-client-runtime/client'
 // Type-only: pulls the locale plugin's Context merge (ctx.locale).
 import type {} from '@deepseek-ai/dsh-client-locale/client'
 // Type-only: pulls the settings-surface Context merge (ctx.settingsScope).
@@ -92,6 +92,18 @@ export interface SettingsPluginItemOwnerProps {
   children?: never
 }
 
+declare module '@deepseek-ai/cordis' {
+  interface Context {
+    /**
+     * Optional rc.6 compatibility binder provided by dsh-web-ui-settings;
+     * absent when that group plugin is not installed, so callers fall back to
+     * the official settings scope.
+     */
+    webUiSettings?: { bind<S>(spec: SettingsScopeSpec<S>): SettingsScope<S> }
+  }
+}
+
+
 /**
  * Client plugin body: register dictionaries, mount the global pet entry and
  * poll loop while the plugin is enabled, and seat the settings card in the
@@ -101,7 +113,8 @@ export interface SettingsPluginItemOwnerProps {
 export function apply(ctx: ClientContext): void {
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'pet: dictionaries')
 
-  const settingsScope = ctx.settingsScope.bind<PetSettings>({ namespace: PET_SETTINGS_NS })
+  const binder = ctx.get('webUiSettings') ?? ctx.settingsScope
+  const settingsScope = binder.bind<PetSettings>({ namespace: PET_SETTINGS_NS })
   const enabled = (): boolean => {
     const snapshot = settingsScope.getSnapshot()
     return snapshot.status === 'ready'

package/src/client/settings-card.module.css

@@ -1,71 +1,83 @@
+/* Plugin settings card chrome + staged form fields.
+ * Aligned with the official ui-settings-plugins PluginCard / fields CSS:
+ * same semantic tokens, radius, typography and states so family cards read
+ * as siblings of the built-in Shell / Agent loop / Web search cards. */
+
 .card {
-  list-style: none;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
   background: var(--dsw-alias-bg-layer-3);
-  overflow: hidden;
+  border-radius: 12px;
+  list-style: none;
   transition: border-color 0.16s, background 0.16s;
 }
 
+.card:hover {
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
 .cardOpen {
   background: var(--dsw-alias-bg-layer-2);
   border-color: var(--dsw-alias-label-dimmed);
 }
 
 .header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  appearance: none;
   width: 100%;
-  padding: 10px 14px;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
   font: inherit;
-  transition: background 120ms ease;
-}
-
-.header:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
-.header:active {
-  background: var(--dsw-alias-interactive-bg-hover-solid);
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  display: flex;
 }
 
 .header:focus-visible {
-  outline: none;
-  /* Inset ring so it is not clipped by the card's overflow:hidden. */
-  box-shadow: inset 0 0 0 2px var(--dsw-alias-button-info-fill);
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
 }
 
 .headText {
-  display: flex;
   flex-direction: column;
-  gap: 2px;
   flex: 1;
+  gap: 4px;
   min-width: 0;
+  display: flex;
 }
 
 .name {
-  font-weight: 600;
   color: var(--dsw-alias-label-primary);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
 }
 
 .description {
-  font-size: 12px;
   color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .pending {
-  font-size: 12px;
-  color: var(--dsw-alias-state-warn-primary);
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  border-radius: 999px;
+  flex: none;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
 }
 
 .chevron {
-  transition: transform 120ms ease;
   color: var(--dsw-alias-label-tertiary);
+  flex: none;
+  transition: transform 0.16s;
 }
 
 .chevronOpen {
@@ -73,53 +85,59 @@
 }
 
 .body {
-  padding: 0 14px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  margin: 0 16px;
+  padding-bottom: 8px;
 }
 
 .readOnly {
-  margin: 0;
-  font-size: 12px;
   color: var(--dsw-alias-label-tertiary);
+  margin: 12px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 .notExposed {
-  margin: 0;
+  color: var(--dsw-alias-state-warn-primary);
+  margin: 12px 0 0;
   font-size: 12px;
   line-height: 1.5;
-  color: var(--dsw-alias-state-warn-primary);
 }
 
 .footer {
-  display: flex;
-  align-items: center;
+  border-top: 1px solid var(--dsw-alias-border-l2);
   justify-content: flex-end;
+  align-items: center;
   gap: 8px;
+  padding: 12px 0 4px;
+  display: flex;
 }
 
 .failed {
-  margin: 0 auto 0 0;
+  min-width: 0;
+  color: var(--dsw-alias-label-error);
+  flex: 1;
+  margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-state-error-primary);
+  line-height: 1.5;
 }
 
 .discard,
 .save {
-  padding: 5px 12px;
-  border-radius: 6px;
+  appearance: none;
   font: inherit;
-  font-size: 13px;
   cursor: pointer;
-  transition: color 120ms ease, border-color 120ms ease,
-    background 120ms ease, box-shadow 120ms ease;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 5px 14px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .discard {
-  border: 1px solid var(--dsw-alias-border-l2);
-  background: transparent;
+  border-color: var(--dsw-alias-border-l2);
   color: var(--dsw-alias-label-secondary);
+  background: transparent;
 }
 
 .discard:hover:not(:disabled) {
@@ -127,156 +145,152 @@
   border-color: var(--dsw-alias-label-dimmed);
 }
 
-.discard:active:not(:disabled) {
-  background: var(--dsw-alias-interactive-bg-hover);
-}
-
 .save {
-  border: 1px solid var(--dsw-alias-button-info-fill);
-  background: var(--dsw-alias-button-info-fill);
-  color: var(--dsw-alias-label-primary-foreground);
-}
-
-.save:hover:not(:disabled) {
-  border-color: var(--dsw-alias-button-info-hover);
-  background: var(--dsw-alias-button-info-hover);
-}
-
-.save:active:not(:disabled) {
-  filter: brightness(0.94);
-}
-
-.discard:focus-visible:not(:disabled),
-.save:focus-visible:not(:disabled) {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--dsw-alias-button-info-fill);
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
 }
 
 .discard:disabled,
 .save:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: default;
 }
 
+.discard:focus-visible,
+.save:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
 .field {
-  display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
+  padding: 12px 0;
+  display: flex;
+}
+
+.field + .field {
+  border-top: 1px solid var(--dsw-alias-border-l2);
 }
 
 .head {
-  display: flex;
   align-items: center;
   gap: 8px;
+  display: flex;
 }
 
 .label {
+  min-width: 0;
+  color: var(--dsw-alias-label-primary);
+  flex: 1;
   font-size: 13px;
   font-weight: 500;
-  color: var(--dsw-alias-label-primary);
+  line-height: 1.5;
 }
 
 .badges {
-  display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+  display: inline-flex;
 }
 
 .badge {
-  font-size: 11px;
-  padding: 1px 6px;
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
   border-radius: 999px;
-  background: var(--dsw-alias-interactive-bg-hover-accent);
-  color: var(--dsw-alias-state-business-primary);
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
 }
 
 .reset {
-  font-size: 11px;
-  border: 0;
-  background: transparent;
-  color: var(--dsw-alias-state-business-primary);
+  font: inherit;
+  color: var(--dsw-alias-label-secondary);
   cursor: pointer;
+  background: transparent;
+  border: none;
   padding: 0;
-  border-radius: 3px;
-  transition: color 120ms ease, box-shadow 120ms ease;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 .reset:hover:not(:disabled) {
-  color: var(--dsw-alias-label-primary-bluish);
-  text-decoration: underline;
-}
-
-.reset:active:not(:disabled) {
-  color: var(--dsw-alias-state-business-primary);
-}
-
-.reset:focus-visible:not(:disabled) {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--dsw-alias-button-info-fill);
+  color: var(--dsw-alias-label-primary);
 }
 
 .reset:disabled {
-  opacity: 0.5;
   cursor: default;
 }
 
+.reset:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 2px;
+}
+
 .input,
 .select {
-  padding: 6px 8px;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
   font: inherit;
-  font-size: 13px;
   color: var(--dsw-alias-label-primary);
-  background: var(--dsw-specific-input-major);
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
-.inputInvalid {
-  padding: 6px 8px;
-  border: 1px solid var(--dsw-alias-state-error-primary);
-  border-radius: 6px;
-  font: inherit;
-  font-size: 13px;
-  color: var(--dsw-alias-label-primary);
+.input:focus-visible,
+.select:focus-visible {
+  border-color: var(--dsw-alias-brand-primary);
+  outline: none;
 }
 
 .input:disabled,
 .select:disabled {
-  opacity: 0.6;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: default;
 }
 
-.input:focus,
-.select:focus {
-  outline: none;
-  border-color: var(--dsw-alias-button-info-fill);
-  box-shadow: 0 0 0 2px var(--dsw-alias-button-info-fill);
+.inputInvalid {
+  border: 1px solid var(--dsw-alias-label-error);
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
+  font: inherit;
+  color: var(--dsw-alias-label-primary);
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
-.inputInvalid:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--dsw-alias-state-error-primary);
+.inputInvalid:focus-visible {
+  outline: 2px solid var(--dsw-alias-label-error);
+  outline-offset: 1px;
+  border-color: var(--dsw-alias-label-error);
 }
 
-.hint {
+.invalid {
+  color: var(--dsw-alias-label-error);
   margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-label-secondary);
+  line-height: 1.5;
 }
 
-.invalid {
+.hint {
+  color: var(--dsw-alias-label-tertiary);
   margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-state-error-primary);
+  line-height: 1.5;
 }
 
-/* Reduced motion: drop the card/button transitions. Token colors and the
-   focus rings stay, so interactive states remain visible without motion. */
 @media (prefers-reduced-motion: reduce) {
   .card,
   .header,
   .chevron,
   .chevronOpen,
-  .reset,
   .discard,
   .save {
     transition: none;