feat(players): app Players library and circular NPC tokens on scenes

Add userData players/teams, scene npcTokens with hex-inscribed sizing, session scale synced to presentation, and Playwright e2e coverage.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/renderer/npcs/NpcGraph.tsx

@@ -302,7 +302,7 @@ function FilterToolbar({
   return (
     <Panel position="top-left">
       <Select
-        className={styles.filterSelect}
+        {...(styles.filterSelect ? { className: styles.filterSelect } : {})}
         ariaLabel={ui.graphFilter}
         value={value}
         onChange={(next) => onChange(next as GraphGroupFilter)}

app/renderer/npcs/NpcsEditorApp.module.css

@@ -189,6 +189,15 @@
   margin-bottom: 8px;
 }
 
+.colorInput {
+  width: 100%;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--stroke);
+  border-radius: 8px;
+  background: transparent;
+}
+
 .avatarPick {
   display: grid;
   gap: 10px;

app/renderer/npcs/NpcsEditorApp.tsx

@@ -14,6 +14,7 @@ import type {
 import editorStyles from '../editor/EditorApp.module.css';
 import { useEditorI18n } from '../editor/i18n/EditorI18nContext';
 import { getDndApi } from '../shared/dndApi';
+import { PlayerTokenView } from '../shared/playerToken/PlayerTokenView';
 import { Button, Input, Select } from '../shared/ui/controls';
 import { useAssetUrl } from '../shared/useAssetImageUrl';
 
@@ -735,11 +736,27 @@ export function NpcsEditorApp() {
                 <div>
                   <div className={styles.fieldLabel}>{t('npcs.avatar')}</div>
                   <div className={styles.avatarPick}>
-                    <div className={styles.avatarPreview}>
-                      {selectedUrl ? (
-                        <img className={styles.avatarPreviewImg} src={selectedUrl} alt="" />
-                      ) : null}
-                    </div>
+                    <PlayerTokenView
+                      name={selected.name}
+                      imageUrl={selectedUrl}
+                      ringColor={selected.ringColor}
+                      imageOffset={selected.imageOffset}
+                      imageScale={selected.imageScale}
+                      sizePx={140}
+                      panEnabled
+                      onImageOffsetChange={(imageOffset) => {
+                        void api.invoke(ipcChannels.project.updateNpcFields, {
+                          npcId: selected.id,
+                          imageOffset,
+                        });
+                      }}
+                      onImageScaleChange={(imageScale) => {
+                        void api.invoke(ipcChannels.project.updateNpcFields, {
+                          npcId: selected.id,
+                          imageScale,
+                        });
+                      }}
+                    />
                     <Button
                       disabled={avatarBusy}
                       onClick={() => {
@@ -764,6 +781,21 @@ export function NpcsEditorApp() {
                   </div>
                 </div>
 
+                <label>
+                  <div className={styles.fieldLabel}>{t('npcs.ringColor')}</div>
+                  <input
+                    type="color"
+                    className={styles.colorInput}
+                    value={selected.ringColor}
+                    onChange={(e) => {
+                      void api.invoke(ipcChannels.project.updateNpcFields, {
+                        npcId: selected.id,
+                        ringColor: e.currentTarget.value,
+                      });
+                    }}
+                  />
+                </label>
+
                 <div>
                   <div className={styles.fieldLabel}>{t('npcs.name')}</div>
                   <Input