feat(npcs): drop binding; select NPCs on storyline export

Remove storyline/scene NPC binding and export chosen NPCs with relations/groups. Harden export modal so a missing npcs payload no longer blacks out the editor.

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

app/renderer/npcs/NpcBindingFields.tsx

@@ -1,135 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { isNpcBindingNone, listStorylineOptionsForBinding, noneBinding } from '../../shared/npcs/npcBinding';
-import type { GraphNodeId, NpcBinding, Project, SceneId } from '../../shared/types';
-import editorStyles from '../editor/EditorApp.module.css';
-import { useEditorI18n } from '../editor/i18n/EditorI18nContext';
-import { Select } from '../shared/ui/controls';
-
-type NpcBindingFieldsProps = {
-  project: Project;
-  binding: NpcBinding;
-  onChange: (binding: NpcBinding) => void;
-};
-
-function defaultBinding(project: Project): NpcBinding {
-  const opts = listStorylineOptionsForBinding(project);
-  if (opts.main) return { kind: 'storyline', storyline: { kind: 'main' } };
-  if (opts.sides[0]) {
-    return {
-      kind: 'storyline',
-      storyline: { kind: 'side', startGraphNodeId: opts.sides[0].startGraphNodeId },
-    };
-  }
-  const firstScene = Object.keys(project.scenes)[0] as SceneId | undefined;
-  if (firstScene) return { kind: 'scene', sceneId: firstScene };
-  return noneBinding();
-}
-
-export function NpcBindingFields({ project, binding, onChange }: NpcBindingFieldsProps) {
-  const { t } = useEditorI18n();
-  const enabled = !isNpcBindingNone(binding);
-  const storylineOpts = useMemo(() => listStorylineOptionsForBinding(project), [project]);
-  const sceneOptions = useMemo(
-    () =>
-      Object.entries(project.scenes)
-        .map(([id, scene]) => ({ id: id as SceneId, title: scene.title.trim() || id }))
-        .sort((a, b) => a.title.localeCompare(b.title, undefined, { sensitivity: 'base' })),
-    [project.scenes],
-  );
-
-  const kind = binding.kind === 'none' ? 'storyline' : binding.kind;
-
-  const bindingTargetValue = useMemo(() => {
-    if (binding.kind === 'scene') return binding.sceneId;
-    if (binding.kind === 'storyline') {
-      if (binding.storyline.kind === 'main') return 'main';
-      return `side:${binding.storyline.startGraphNodeId}`;
-    }
-    return '';
-  }, [binding]);
-
-  return (
-    <div className={editorStyles.fieldGrid}>
-      <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, cursor: 'pointer' }}>
-        <input
-          type="checkbox"
-          checked={enabled}
-          onChange={(e) => {
-            onChange(e.target.checked ? defaultBinding(project) : noneBinding());
-          }}
-        />
-        <span>{t('npcs.bindingEnable')}</span>
-      </label>
-
-      {enabled ? (
-        <>
-          <div className={editorStyles.fieldLabel}>{t('npcs.bindingKind')}</div>
-          <Select
-            value={kind}
-            ariaLabel={t('npcs.bindingKind')}
-            options={[
-              { value: 'storyline', label: t('npcs.bindingStoryline') },
-              { value: 'scene', label: t('npcs.bindingScene') },
-            ]}
-            onChange={(nextKind) => {
-              if (nextKind === 'scene') {
-                const first = sceneOptions[0];
-                onChange(first ? { kind: 'scene', sceneId: first.id } : noneBinding());
-                return;
-              }
-              if (storylineOpts.main) {
-                onChange({ kind: 'storyline', storyline: { kind: 'main' } });
-              } else if (storylineOpts.sides[0]) {
-                onChange({
-                  kind: 'storyline',
-                  storyline: { kind: 'side', startGraphNodeId: storylineOpts.sides[0].startGraphNodeId },
-                });
-              } else {
-                onChange(noneBinding());
-              }
-            }}
-          />
-
-          <div className={editorStyles.fieldLabel}>{t('npcs.bindingSelect')}</div>
-          <Select
-            value={bindingTargetValue}
-            ariaLabel={t('npcs.bindingSelect')}
-            options={
-              kind === 'storyline'
-                ? [
-                    ...(storylineOpts.main
-                      ? [{ value: 'main', label: t('npcs.bindingMain') }]
-                      : []),
-                    ...storylineOpts.sides.map((s) => ({
-                      value: `side:${s.startGraphNodeId}`,
-                      label: s.label,
-                    })),
-                  ]
-                : sceneOptions.map((s) => ({ value: s.id, label: s.title }))
-            }
-            onChange={(v) => {
-              if (kind === 'scene') {
-                onChange({ kind: 'scene', sceneId: v as SceneId });
-                return;
-              }
-              if (v === 'main') {
-                onChange({ kind: 'storyline', storyline: { kind: 'main' } });
-                return;
-              }
-              if (v.startsWith('side:')) {
-                onChange({
-                  kind: 'storyline',
-                  storyline: {
-                    kind: 'side',
-                    startGraphNodeId: v.slice(5) as GraphNodeId,
-                  },
-                });
-              }
-            }}
-          />
-        </>
-      ) : null}
-    </div>
-  );
-}

app/renderer/npcs/NpcEditModal.tsx

@@ -2,9 +2,8 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { createPortal, flushSync } from 'react-dom';
 
 import { ipcChannels } from '../../shared/ipc/contracts';
-import { noneBinding } from '../../shared/npcs/npcBinding';
 import { buildNpcGroupForest } from '../../shared/npcs/npcGroups';
-import type { NpcBinding, NpcGroupId, Project, ProjectNpc, ProjectNpcGroup } from '../../shared/types';
+import type { NpcGroupId, ProjectNpc, ProjectNpcGroup } from '../../shared/types';
 import editorStyles from '../editor/EditorApp.module.css';
 import {
   filterMaterialImagePaths,
@@ -18,8 +17,6 @@ import { getDndApi } from '../shared/dndApi';
 import { Button, Input, Select } from '../shared/ui/controls';
 import { useAssetUrl } from '../shared/useAssetImageUrl';
 
-import { NpcBindingFields } from './NpcBindingFields';
-
 function normalizeName(input: string): string {
   return input.trim().toLowerCase();
 }
@@ -41,7 +38,6 @@ type NpcEditModalProps = {
   open: boolean;
   initial: ProjectNpc | null;
   existingNames: string[];
-  project: Project | null;
   npcGroups: ProjectNpcGroup[];
   onClose: () => void;
   onPickImage: () => Promise<{ filePath: string; previewDataUrl: string } | null>;
@@ -49,7 +45,6 @@ type NpcEditModalProps = {
     name: string;
     filePath?: string;
     groupId?: NpcGroupId | null;
-    binding?: NpcBinding;
   }) => Promise<void>;
 };
 
@@ -57,7 +52,6 @@ export function NpcEditModal({
   open,
   initial,
   existingNames,
-  project,
   npcGroups,
   onClose,
   onPickImage,
@@ -69,7 +63,6 @@ export function NpcEditModal({
   const [filePath, setFilePath] = useState<string | null>(null);
   const [localPreviewUrl, setLocalPreviewUrl] = useState<string | null>(null);
   const [groupId, setGroupId] = useState<NpcGroupId | ''>('');
-  const [binding, setBinding] = useState<NpcBinding>(noneBinding());
   const [saving, setSaving] = useState(false);
   const [saveProgress, setSaveProgress] = useState<{ percent: number; detail: string } | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -86,7 +79,6 @@ export function NpcEditModal({
     setFilePath(null);
     setLocalPreviewUrl(null);
     setGroupId(initial?.groupId ?? '');
-    setBinding(initial?.binding ?? noneBinding());
     setSaving(false);
     setSaveProgress(null);
     setError(null);
@@ -261,10 +253,6 @@ export function NpcEditModal({
           {!hasImage ? <div className={editorStyles.fieldError}>{t('npcs.avatarRequired')}</div> : null}
         </div>
 
-        {project && !initial ? (
-          <NpcBindingFields project={project} binding={binding} onChange={setBinding} />
-        ) : null}
-
         {error ? <div className={editorStyles.fieldError}>{error}</div> : null}
 
         <div className={editorStyles.modalFooter}>
@@ -286,7 +274,7 @@ export function NpcEditModal({
                   await onSave({
                     name: trimmed,
                     ...(filePath ? { filePath } : {}),
-                    ...(!initial ? { groupId: groupId || null, binding } : {}),
+                    ...(!initial ? { groupId: groupId || null } : {}),
                   });
                   onClose();
                 } catch (e) {

app/renderer/npcs/NpcsEditorApp.tsx

@@ -4,7 +4,6 @@ import { createPortal } from 'react-dom';
 import { ipcChannels, type SessionState } from '../../shared/ipc/contracts';
 import { buildNpcGroupForest, type NpcGroupTreeNode } from '../../shared/npcs/npcGroups';
 import type {
-  NpcBinding,
   NpcGroupId,
   NpcId,
   NpcRelationId,
@@ -18,7 +17,6 @@ import { getDndApi } from '../shared/dndApi';
 import { Button, Input, Select } from '../shared/ui/controls';
 import { useAssetUrl } from '../shared/useAssetImageUrl';
 
-import { NpcBindingFields } from './NpcBindingFields';
 import { NpcDescriptionField } from './NpcDescriptionField';
 import { NpcEditModal } from './NpcEditModal';
 import type { GraphGroupFilter } from './NpcGraph';
@@ -822,20 +820,6 @@ export function NpcsEditorApp() {
                   />
                 </div>
 
-                <div>
-                  <div className={styles.fieldLabel}>{t('npcs.bindingEnable')}</div>
-                  <NpcBindingFields
-                    project={project}
-                    binding={selected.binding}
-                    onChange={(binding: NpcBinding) => {
-                      void api.invoke(ipcChannels.project.updateNpcFields, {
-                        npcId: selected.id,
-                        binding,
-                      });
-                    }}
-                  />
-                </div>
-
                 {relationsForSelected.length > 0 ? (
                   <div>
                     <div className={styles.relationsTitle}>{t('npcs.relations')}</div>
@@ -860,7 +844,6 @@ export function NpcsEditorApp() {
         open={editOpen}
         initial={editInitial}
         existingNames={npcs.map((n) => n.name)}
-        project={project}
         npcGroups={npcGroups}
         onClose={() => setEditOpen(false)}
         onPickImage={pickAvatar}
@@ -870,7 +853,6 @@ export function NpcsEditorApp() {
             name: input.name,
             ...(input.filePath ? { filePath: input.filePath } : {}),
             ...(input.groupId !== undefined ? { groupId: input.groupId } : {}),
-            ...(input.binding !== undefined ? { binding: input.binding } : {}),
           });
           const created = res.project.npcs.find((n) => n.name === input.name.trim());
           if (created) setSelectedId(created.id);