@linxin666/dsh-pet 0.1.1

package/lib/types/treats.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Treat (小鱼干) economy — pure, clock-injected. The pet's food comes from
+ * two sources, both tied to companionship:
+ *  - work output: every N completed turns grant one treat;
+ *  - time output: every T minutes of wall-clock time grant one treat.
+ * Feeding consumes one treat. Settlement is lazy: it runs whenever the host
+ * serves a state snapshot or an interaction, so there is no timer and no
+ * drift — elapsed periods are computed from the persisted last-grant marks.
+ * @module @linxin666/dsh-pet/treats
+ */
+/** Treat economy tuning. */
+export interface TreatConfig {
+    /** Completed turns per work-output treat. */
+    turnsPerTreat: number;
+    /** Wall-clock ms per time-output treat. */
+    timeTreatMs: number;
+    /** Hard cap on stocked treats. */
+    maxTreats: number;
+}
+export declare const defaultTreatConfig: TreatConfig;
+/** Treat ledger as persisted inside PetPersist. */
+export interface TreatLedger {
+    /** Current stocked treats (0..maxTreats). */
+    treats: number;
+    /** Time-output anchor: epoch ms the wall-clock treat clock last advanced (0 = never started). */
+    lastTreatGrantAt: number;
+    /** Work-output anchor: affinity turns counter at the last work-out settle. */
+    turnsAtLastTreatGrant: number;
+}
+export declare function emptyTreatLedger(): TreatLedger;
+/** Outcome of one settlement pass. */
+export interface TreatSettlement {
+    /** Mutated ledger (caller persists it). */
+    ledger: TreatLedger;
+    /** Treats gained in this pass (work + time). */
+    gained: number;
+}
+/**
+ * Settle treat grants from both sources against one ledger snapshot.
+ * Work output counts whole periods since the last work settlement
+ * (turnsDelta / turnsPerTreat) and advances only the work anchor;
+ * time output counts whole periods since the time anchor
+ * (`lastTreatGrantAt`) and advances only the time anchor. The two sources
+ * are independent so a continuously working user still earns time treats.
+ * 0 time history never backfills — the clock starts at the first settlement.
+ * Both sources are clamped by the stock cap.
+ */
+export declare function settleTreatGrants(ledger: TreatLedger, turns: number, nowMs: number, config?: TreatConfig): TreatSettlement;
+/**
+ * Consume one treat for a feed. Returns the outcome; a feed with no stocked
+ * treats is refused.
+ */
+export declare function consumeTreat(ledger: TreatLedger): {
+    ok: true;
+    ledger: TreatLedger;
+} | {
+    ok: false;
+};
+//# sourceMappingURL=treats.d.ts.map

package/lib/types/treats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"treats.d.ts","sourceRoot":"","sources":["../../src/treats.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,4BAA4B;AAC5B,MAAM,WAAW,WAAW;IAC1B,6CAA6C;IAC7C,aAAa,EAAE,MAAM,CAAA;IACrB,2CAA2C;IAC3C,WAAW,EAAE,MAAM,CAAA;IACnB,kCAAkC;IAClC,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,eAAO,MAAM,kBAAkB,EAAE,WAIhC,CAAA;AAED,mDAAmD;AACnD,MAAM,WAAW,WAAW;IAC1B,6CAA6C;IAC7C,MAAM,EAAE,MAAM,CAAA;IACd,iGAAiG;IACjG,gBAAgB,EAAE,MAAM,CAAA;IACxB,8EAA8E;IAC9E,qBAAqB,EAAE,MAAM,CAAA;CAC9B;AAED,wBAAgB,gBAAgB,IAAI,WAAW,CAE9C;AAED,sCAAsC;AACtC,MAAM,WAAW,eAAe;IAC9B,2CAA2C;IAC3C,MAAM,EAAE,WAAW,CAAA;IACnB,gDAAgD;IAChD,MAAM,EAAE,MAAM,CAAA;CACf;AAMD;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,MAAM,GAAE,WAAgC,GACvC,eAAe,CAqBjB;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAC1B,MAAM,EAAE,WAAW,GAClB;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,MAAM,EAAE,WAAW,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,KAAK,CAAA;CAAE,CAGnD"}

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@linxin666/dsh-pet",
+  "description": "鲸鱼娘宠物插件 for the dsh web GUI: a soft healing whale-girl companion that reacts to model activity (idle/waiting/thinking/tool/done), with petting/feeding interactions and an affinity score",
+  "version": "0.1.1",
+  "type": "module",
+  "engines": {
+    "node": "^22.19.0 || >=24.0.0"
+  },
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./invariant": {
+      "types": "./lib/types/invariant.d.ts",
+      "default": "./lib/invariant.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/invariant.js",
+    "lib/client.js",
+    "lib/types/**/*.d.ts",
+    "lib/types/**/*.d.ts.map",
+    "src",
+    "assets",
+    "cordis.patch.yml"
+  ],
+  "license": "BSD-3-Clause",
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-slots",
+        "@deepseek-ai/dsh-client-ui-conversation"
+      ],
+      "platform": "web"
+    }
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "schemastery": "^3.18.0"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-session": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-invariants": "^0.1.0-rc.6",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-session": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^22.20.0",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "~18.3.0",
+    "jsdom": "29.1.1",
+    "lightningcss": "^1.32.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tsdown": "^0.22.2",
+    "typescript": "^6.0.3",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.1.8"
+  },
+  "scripts": {
+    "build": "tsc -b && tsdown",
+    "test": "vitest run",
+    "typecheck": "tsc -b --pretty false && tsc -p tsconfig.test.json --pretty false"
+  }
+}

package/src/affinity.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from 'vitest'
+import {
+  AFFINITY_MAX,
+  AFFINITY_RANKS,
+  applyInteraction,
+  applyTurnReward,
+  defaultAffinityConfig,
+  emptyAffinity,
+  rankOf,
+} from './affinity.ts'
+
+describe('applyInteraction', () => {
+  it('accepts the first pet and grants the pet reward', () => {
+    const now = 1_000_000
+    const outcome = applyInteraction(emptyAffinity(), 'pet', now)
+    expect(outcome.accepted).toBe(true)
+    expect(outcome.delta).toBe(defaultAffinityConfig.petReward)
+    expect(outcome.affinity.points).toBe(defaultAffinityConfig.petReward)
+    expect(outcome.affinity.pets).toBe(1)
+    expect(outcome.affinity.lastPetAt).toBe(now)
+  })
+
+  it('rejects a pet inside the cooldown without mutating state', () => {
+    const now = 1_000_000
+    const first = applyInteraction(emptyAffinity(), 'pet', now)
+    const second = applyInteraction(first.affinity, 'pet', now + defaultAffinityConfig.petCooldownMs - 1)
+    expect(second.accepted).toBe(false)
+    expect(second.delta).toBe(0)
+    expect(second.affinity).toBe(first.affinity) // same reference: no mutation
+    expect(second.affinity.pets).toBe(1)
+  })
+
+  it('accepts a pet again after the cooldown elapsed', () => {
+    const now = 1_000_000
+    const first = applyInteraction(emptyAffinity(), 'pet', now)
+    const second = applyInteraction(first.affinity, 'pet', now + defaultAffinityConfig.petCooldownMs)
+    expect(second.accepted).toBe(true)
+    expect(second.affinity.pets).toBe(2)
+  })
+
+  it('rejects a feed inside the cooldown without spending anything', () => {
+    const now = 1_000_000
+    const first = applyInteraction(emptyAffinity(), 'feed', now)
+    const second = applyInteraction(first.affinity, 'feed', now + defaultAffinityConfig.feedCooldownMs - 1)
+    expect(second.accepted).toBe(false)
+    expect(second.delta).toBe(0)
+    expect(second.affinity).toBe(first.affinity)
+    expect(second.affinity.feeds).toBe(1)
+  })
+
+  it('clamps points at AFFINITY_MAX', () => {
+    const state = { ...emptyAffinity(), points: AFFINITY_MAX - 1 }
+    const outcome = applyInteraction(state, 'pet', 1_000_000)
+    expect(outcome.affinity.points).toBe(AFFINITY_MAX)
+  })
+})
+
+describe('applyTurnReward', () => {
+  it('increments turns and points', () => {
+    const next = applyTurnReward(emptyAffinity())
+    expect(next.turns).toBe(1)
+    expect(next.points).toBe(defaultAffinityConfig.turnReward)
+  })
+})
+
+describe('rankOf', () => {
+  it('maps point totals onto the rank ladder', () => {
+    for (const rank of AFFINITY_RANKS) {
+      expect(rankOf(rank.min).name).toBe(rank.name)
+    }
+    expect(rankOf(AFFINITY_MAX).name).toBe(AFFINITY_RANKS[AFFINITY_RANKS.length - 1]!.name)
+    expect(rankOf(-1).name).toBe(AFFINITY_RANKS[0]!.name)
+  })
+})

package/src/affinity.ts

@@ -0,0 +1,144 @@
+/**
+ * Affinity score — pure, clock-injected. The pet grows closer the more you
+ * work together and care for it: every completed turn earns a small reward,
+ * petting earns a tiny one (cooldown-gated), feeding earns the most.
+ * Persistence lives in the service; this module only computes transitions.
+ * @module @linxin666/dsh-pet/affinity
+ */
+
+/** One interaction the user can perform on the pet. */
+export type PetInteraction = 'pet' | 'feed'
+
+/** Affinity state as persisted. */
+export interface AffinityState {
+  /** Total affinity points, capped at AFFINITY_MAX. */
+  points: number
+  /** Epoch ms of the last pet interaction. */
+  lastPetAt: number
+  /** Epoch ms of the last feed. */
+  lastFeedAt: number
+  /** Total pet count (lifetime). */
+  pets: number
+  /** Total feed count (lifetime). */
+  feeds: number
+  /** Total completed turns witnessed (lifetime). */
+  turns: number
+}
+
+export const AFFINITY_MAX = 100
+
+/** Affinity ranks by points; the pet visibly grows with its rank.
+ *  Marker glyphs are plain ASCII (the repo bans all emoji characters);
+ *  they read as a growing star trail alongside the rank name. */
+export const AFFINITY_RANKS = [
+  { min: 0, name: '幼鲸', emoji: '*' },
+  { min: 25, name: '伙伴', emoji: '**' },
+  { min: 50, name: '挚友', emoji: '***' },
+  { min: 80, name: '深海羁绊', emoji: '****' },
+] as const
+
+/** Interaction tuning (all in points / ms). */
+export interface AffinityConfig {
+  /** Points per completed turn. */
+  turnReward: number
+  /** Points per pet; applied only outside the pet cooldown. */
+  petReward: number
+  /** Cooldown between pets, ms. */
+  petCooldownMs: number
+  /** Points per feed. */
+  feedReward: number
+  /** Cooldown between feeds, ms. */
+  feedCooldownMs: number
+}
+
+export const defaultAffinityConfig: AffinityConfig = {
+  turnReward: 1,
+  petReward: 1,
+  petCooldownMs: 10_000,
+  feedReward: 5,
+  feedCooldownMs: 30_000,
+}
+
+export function emptyAffinity(): AffinityState {
+  return { points: 0, lastPetAt: 0, lastFeedAt: 0, pets: 0, feeds: 0, turns: 0 }
+}
+
+/** Outcome of one interaction. */
+export interface InteractionOutcome {
+  /** Mutated affinity state (caller persists it). */
+  affinity: AffinityState
+  /** Points actually gained (0 when inside the cooldown). */
+  delta: number
+  /** Human-readable reaction copy the UI shows as a bubble. */
+  reaction: string
+  /** True when the interaction was accepted (outside cooldown). */
+  accepted: boolean
+}
+
+/** Rank for a point total. */
+export function rankOf(points: number): (typeof AFFINITY_RANKS)[number] {
+  let rank: (typeof AFFINITY_RANKS)[number] = AFFINITY_RANKS[0]!
+  for (const candidate of AFFINITY_RANKS) {
+    if (points >= candidate.min) rank = candidate
+  }
+  return rank
+}
+
+function clamp(points: number): number {
+  return Math.min(AFFINITY_MAX, Math.max(0, points))
+}
+
+/**
+ * Apply one interaction to a copy of the state (immutable style: returns a
+ * new object; the caller replaces the persisted state). Cooldowns only
+ * apply once the pet has been interacted with at least once (last*At === 0
+ * means "never", so the first pet/feed always lands).
+ */
+export function applyInteraction(
+  state: AffinityState,
+  kind: PetInteraction,
+  nowMs: number,
+  config: AffinityConfig = defaultAffinityConfig,
+): InteractionOutcome {
+  const next = { ...state }
+  if (kind === 'pet') {
+    if (state.lastPetAt !== 0 && nowMs - state.lastPetAt < config.petCooldownMs) {
+      return { affinity: state, delta: 0, reaction: '摸过头啦，让鲸鱼娘歇口气～', accepted: false }
+    }
+    next.lastPetAt = nowMs
+    next.pets += 1
+    next.points = clamp(state.points + config.petReward)
+    return {
+      affinity: next,
+      delta: config.petReward,
+      reaction: '咕噜咕噜～被摸摸好舒服！',
+      accepted: true,
+    }
+  }
+  if (kind === 'feed') {
+    if (state.lastFeedAt !== 0 && nowMs - state.lastFeedAt < config.feedCooldownMs) {
+      return { affinity: state, delta: 0, reaction: '吃饱啦，晚点再喂～', accepted: false }
+    }
+    next.lastFeedAt = nowMs
+    next.feeds += 1
+    next.points = clamp(state.points + config.feedReward)
+    return {
+      affinity: next,
+      delta: config.feedReward,
+      reaction: '呜哇！小鱼干好好吃！',
+      accepted: true,
+    }
+  }
+  return { affinity: state, delta: 0, reaction: '', accepted: false }
+}
+
+/** Reward one completed turn (called by the host on `done`). */
+export function applyTurnReward(
+  state: AffinityState,
+  config: AffinityConfig = defaultAffinityConfig,
+): AffinityState {
+  const next = { ...state }
+  next.turns += 1
+  next.points = clamp(state.points + config.turnReward)
+  return next
+}

package/src/client/PetDockEntry.tsx

@@ -0,0 +1,95 @@
+/**
+ * Dock anchor inside `conversation.input.selector.context`: the input
+ * selector row mounts in EVERY conversation phase (no-session cold start,
+ * the blank-session hero, and the active seat), so the floating pet stays on
+ * screen on the new-conversation screen too. While visible it mounts the
+ * floating WhalePet (portal); while hidden it renders the summon button.
+ * @module @linxin666/dsh-pet/client/PetDockEntry
+ */
+
+import { useEffect, useSyncExternalStore, type ReactElement } from 'react'
+import type { PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
+import type { PetDisplayConfig } from '../persist.ts'
+import type { PetStoreInstance } from './pet-store.ts'
+import { WhalePet } from './WhalePet.tsx'
+import { NS } from './locales.ts'
+import styles from './pet.module.css'
+
+/** Injected actions handed to the dock entry component. */
+export interface PetInjected {
+  /** The app-wide pet store instance (snapshot + feedback). */
+  store: PetStoreInstance
+  /** Ensure the first snapshot is fetched (called on mount). */
+  ensure: () => void
+  /** Pet the whale girl (click). */
+  pet: () => void
+  /** Feed the whale girl. */
+  feed: () => void
+  /** Hide the whale girl. */
+  hide: () => void
+  /** Summon the hidden whale girl back. */
+  summon: () => void
+  /** Persist a drag position. */
+  dragEnd: (right: number, bottom: number) => void
+  /** Rename the pet (persisted by the host). */
+  rename: (name: string) => void
+  /** Clear the reaction bubble. */
+  feedbackDone: () => void
+}
+
+/** Composed props of the dock entry (runtime + locale + injected). */
+export type PetDockEntryProps =
+  PropsRuntime<'conversation.input.selector.context'>
+  & PetInjected
+  & PropsLocale<typeof NS>
+
+const DEFAULT_DISPLAY: PetDisplayConfig = { visible: true, size: 160, right: 24, bottom: 20 }
+
+/**
+ * Dock entry: while the pet is visible, mount the floating WhalePet (it
+ * portals itself onto document.body); while hidden, render the summon
+ * button so the pet can always come back. The store is the plugin-owned
+ * single instance — the slot system provides none because the pet is
+ * host-global, not session-scoped.
+ */
+export function PetDockEntry(props: PetDockEntryProps): ReactElement {
+  const { store, ensure } = props
+  const ui = useSyncExternalStore(store.subscribe, store.getSnapshot)
+  const snapshot = ui.snapshot
+  const feedback = ui.feedback
+  const visible = snapshot?.display.visible ?? true
+
+  useEffect(() => {
+    ensure()
+  }, [ensure])
+
+  if (visible) {
+    return (
+      <span data-pet-dock data-testid="pet-dock">
+        <WhalePet
+          snapshot={snapshot}
+          display={snapshot?.display ?? DEFAULT_DISPLAY}
+          feedback={feedback}
+          onPet={props.pet}
+          onFeed={props.feed}
+          onHide={props.hide}
+          onDragEnd={props.dragEnd}
+          onRename={props.rename}
+          onFeedbackDone={props.feedbackDone}
+          t={props.t}
+        />
+      </span>
+    )
+  }
+  return (
+    <button
+      type="button"
+      className={styles.summon}
+      onClick={props.summon}
+      data-testid="pet-summon"
+    >
+      {props.t('pet.summon', { name: snapshot?.name ?? '鲸鱼娘' })}
+    </button>
+  )
+}

package/src/client/PetSettingsCard.tsx

@@ -0,0 +1,186 @@
+/**
+ * The pet settings card: display layout and name, bound to the `pet` settings
+ * namespace the host plugin registers. Registered into the
+ * `settings.plugin.item` slot the plugin-configuration section renders.
+ */
+
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type { SettingsScope, SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import { PluginSettingsCard, ValueField, BooleanField } from './PluginSettingsCard.tsx'
+import { CardForm, booleanField, numberField, textField, type CardActions, type CardShell, type FieldState as CardFieldState } from './settings-form.ts'
+
+/** The pet's settings fields this card edits (the namespace's full schema). */
+export interface PetSettings {
+  /** Master switch for the plugin. */
+  enabled?: boolean
+  /** Master switch. */
+  visible?: boolean
+  /** Scale of the rendered pet in px (sprite cell height). */
+  size?: number
+  /** Horizontal inset from the viewport right edge, px. */
+  right?: number
+  /** Vertical inset from the viewport bottom edge, px. */
+  bottom?: number
+  /** User-customizable pet display name. */
+  name?: string
+}
+
+/** What the pet settings card renders. */
+export interface PetSettingsCardState extends CardShell {
+  /** Plugin master switch. */
+  enabled: CardFieldState
+  /** Master switch. */
+  visible: CardFieldState
+  /** Pet scale. */
+  size: CardFieldState
+  /** Right inset. */
+  right: CardFieldState
+  /** Bottom inset. */
+  bottom: CardFieldState
+  /** Pet name. */
+  name: CardFieldState
+}
+
+/** The registration-side face the card's slot entry injects. */
+export interface PetSettingsCardFace extends CardActions {
+  hooks: {
+    /** Card snapshot bound by the renderer as usePetSettingsCard. */
+    petSettingsCard: SnapshotStore<PetSettingsCardState>
+  }
+}
+
+/** Bridges the `pet` scope onto the card's staged form. */
+export class PetSettingsCardController {
+  private readonly form: CardForm<PetSettings>
+  private readonly store: SnapshotStore<PetSettingsCardState>
+
+  /** @param scope - the bound settings scope for the `pet` namespace. */
+  constructor(scope: SettingsScope<PetSettings>) {
+    this.form = new CardForm(scope, [
+      booleanField('enabled'),
+      booleanField('visible'),
+      numberField('size'),
+      numberField('right'),
+      numberField('bottom'),
+      textField('name'),
+    ])
+    this.store = this.form.bind(() => this.projection())
+  }
+
+  private projection(): PetSettingsCardState {
+    return {
+      ...this.form.shell(),
+      enabled: this.form.field('enabled'),
+      visible: this.form.field('visible'),
+      size: this.form.field('size'),
+      right: this.form.field('right'),
+      bottom: this.form.field('bottom'),
+      name: this.form.field('name'),
+    }
+  }
+
+  /**
+   * Build the face the card's slot registration injects.
+   * @returns the card's snapshot and its form actions.
+   */
+  inject(): PetSettingsCardFace {
+    return { hooks: { petSettingsCard: this.store }, ...this.form.actions() }
+  }
+}
+
+/** Props the renderer binds for the pet settings card. */
+export type PetSettingsCardProps =
+  PropsRuntime<'web-ui.plugin.item'>
+  & PropsLocale<'pet'>
+  & InjectFace<PetSettingsCardFace>
+
+/**
+ * Render the pet settings card.
+ * @param props - locale copy, the card snapshot, and its form actions.
+ * @returns the card.
+ */
+export function PetSettingsCard(props: PetSettingsCardProps) {
+  const { t } = props
+  const state = props.usePetSettingsCard(snapshot => snapshot)
+  const disabled = !state.writable
+  const fieldProps = {
+    overriddenLabel: t('settings.overridden'),
+    resetLabel: t('settings.reset'),
+    invalidLabel: t('settings.invalidNumber'),
+    disabled,
+  }
+  return (
+    <PluginSettingsCard
+      t={t}
+      titleKey="settings.title"
+      descriptionKey="settings.description"
+      state={state}
+      onSave={props.save}
+      onDiscard={props.discard}
+    >
+      <BooleanField
+        id="settings-pet-enabled"
+        label={t('settings.enabled')}
+        hint={t('settings.enabledHint')}
+        inheritLabel={t('settings.inherit')}
+        onLabel={t('settings.on')}
+        offLabel={t('settings.off')}
+        {...fieldProps}
+        {...state.enabled}
+        onEdit={(text) => { props.edit('enabled', text) }}
+        onReset={() => { props.resetField('enabled') }}
+      />
+      <BooleanField
+        id="settings-pet-visible"
+        label={t('settings.visible')}
+        hint={t('settings.visibleHint')}
+        inheritLabel={t('settings.inherit')}
+        onLabel={t('settings.on')}
+        offLabel={t('settings.off')}
+        {...fieldProps}
+        {...state.visible}
+        onEdit={(text) => { props.edit('visible', text) }}
+        onReset={() => { props.resetField('visible') }}
+      />
+      <ValueField
+        id="settings-pet-size"
+        label={t('settings.size')}
+        hint={t('settings.sizeHint')}
+        numeric
+        {...fieldProps}
+        {...state.size}
+        onEdit={(text) => { props.edit('size', text) }}
+        onReset={() => { props.resetField('size') }}
+      />
+      <ValueField
+        id="settings-pet-right"
+        label={t('settings.right')}
+        hint={t('settings.rightHint')}
+        numeric
+        {...fieldProps}
+        {...state.right}
+        onEdit={(text) => { props.edit('right', text) }}
+        onReset={() => { props.resetField('right') }}
+      />
+      <ValueField
+        id="settings-pet-bottom"
+        label={t('settings.bottom')}
+        hint={t('settings.bottomHint')}
+        numeric
+        {...fieldProps}
+        {...state.bottom}
+        onEdit={(text) => { props.edit('bottom', text) }}
+        onReset={() => { props.resetField('bottom') }}
+      />
+      <ValueField
+        id="settings-pet-name"
+        label={t('settings.name')}
+        hint={t('settings.nameHint')}
+        {...fieldProps}
+        {...state.name}
+        onEdit={(text) => { props.edit('name', text) }}
+        onReset={() => { props.resetField('name') }}
+      />
+    </PluginSettingsCard>
+  )
+}