diff --git a/ui/src/components/MainContent/TabFilter.tsx b/ui/src/components/MainContent/TabFilter.tsx
index 507f4a0d..4e9489f8 100644
--- a/ui/src/components/MainContent/TabFilter.tsx
+++ b/ui/src/components/MainContent/TabFilter.tsx
@@ -232,6 +232,7 @@ export function TabFilter() {
{ value: 'comics', label: t('tabs.comics'), description: t('descriptions.comics'), icon:
, action: () => openFilter('comics') },
{ value: 'characters', label: t('tabs.characters'), description: t('descriptions.characters'), icon:
, action: () => openFilter('characters') },
{ value: 'scene3d', label: t('tabs.scene3d'), description: t('descriptions.video3d'), icon:
, action: () => openFilter('scene3d') },
+ { value: 'world3d', label: t('tabs.world3d'), description: t('descriptions.world3d'), icon:
, action: () => openFilter('world3d') },
{ value: 'animate3d', label: t('tabs.animate3d'), description: t('descriptions.animate3d'), icon:
, action: () => openFilter('animate3d') },
]
const productionItems: MenuItem[] = [
diff --git a/ui/src/components/Sidebar/SceneAnimatorExplorer.tsx b/ui/src/components/Sidebar/SceneAnimatorExplorer.tsx
new file mode 100644
index 00000000..d5f8992e
--- /dev/null
+++ b/ui/src/components/Sidebar/SceneAnimatorExplorer.tsx
@@ -0,0 +1,146 @@
+import type { ApiOutput } from '../../api/outputs'
+import { useUiTranslation } from '../../i18n'
+import type { AssetSuitability, NarrativeAssetRole } from '../../lib/assetSuitability'
+import {
+ NARRATIVE_SCENE_TEMPLATES,
+ type NarrativeSceneId,
+ type NarrativeSceneTemplate,
+ type NarrativeTemplateInput,
+} from '../../lib/sceneNarrative'
+import { AssetExplorerDialog, AssetPickTrigger } from '../common/AssetExplorerDialog'
+import {
+ applyExplorerChoice,
+ assetsForExplorer,
+ explorerAllowsNone,
+ explorerSelectedName,
+ explorerTitleKey,
+ type AssetExplorerPurpose,
+ type ExplorerChoiceHandlers,
+} from '../common/assetExplorer.ts'
+
+export function SceneAnimatorExplorer({
+ purpose,
+ models,
+ media,
+ visuals,
+ audio,
+ names,
+ handlers,
+ onClose,
+}: {
+ purpose: AssetExplorerPurpose | null
+ models: ApiOutput[]
+ media: ApiOutput[]
+ visuals: ApiOutput[]
+ audio: ApiOutput[]
+ names: { hero: string; plate: string; prop: string; foreground: string }
+ handlers: ExplorerChoiceHandlers
+ onClose: () => void
+}) {
+ const { t } = useUiTranslation('scene3d')
+ return (
+
{
+ if (purpose) applyExplorerChoice(purpose, item, handlers)
+ onClose()
+ }}
+ />
+ )
+}
+
+export function SceneAnimatorNarrativeSetup({
+ busy,
+ templateId,
+ template,
+ visuals,
+ media,
+ hero,
+ plate,
+ plateLoopReady,
+ prop,
+ foreground,
+ mood,
+ intensity,
+ direction,
+ camera,
+ palette,
+ voiceSpace,
+ suitability,
+ onTemplateId,
+ onOpenExplorer,
+ onPlateLoopReady,
+ onMood,
+ onIntensity,
+ onDirection,
+ onCamera,
+ onPalette,
+ onVoiceSpace,
+ onMount,
+}: {
+ busy: boolean
+ templateId: NarrativeSceneId
+ template: NarrativeSceneTemplate
+ visuals: ApiOutput[]
+ media: ApiOutput[]
+ hero: string
+ plate: string
+ plateLoopReady: boolean
+ prop: string
+ foreground: string
+ mood: NonNullable['mood']
+ intensity: 1 | 2 | 3
+ direction: NonNullable['direction']
+ camera: NonNullable['camera']
+ palette: NonNullable['palette']
+ voiceSpace: NonNullable['voiceSpace']
+ suitability: (role: NarrativeAssetRole, name: string) => AssetSuitability
+ onTemplateId: (id: NarrativeSceneId) => void
+ onOpenExplorer: (purpose: AssetExplorerPurpose) => void
+ onPlateLoopReady: (ready: boolean) => void
+ onMood: (value: NonNullable['mood']) => void
+ onIntensity: (value: 1 | 2 | 3) => void
+ onDirection: (value: NonNullable['direction']) => void
+ onCamera: (value: NonNullable['camera']) => void
+ onPalette: (value: NonNullable['palette']) => void
+ onVoiceSpace: (value: NonNullable['voiceSpace']) => void
+ onMount: () => void
+}) {
+ const { t } = useUiTranslation('scene3d')
+ const heroFit = suitability('hero', hero)
+ const plateFit = suitability('plate', plate)
+ const propSlot = template.assetSlots.find(slot => slot.id === 'prop')
+ const foregroundSlot = template.assetSlots.find(slot => slot.id === 'foreground')
+ return (
+
+
{t('animator.narrativeTitle')}{t('animator.narrativeMeta')}
+
+
{NARRATIVE_SCENE_TEMPLATES.map(item => )}
+
{template.description}
+
asset.name === hero)} placeholder={t('animator.chooseAsset')} disabled={busy} onOpen={() => onOpenExplorer('narrative-hero')} />
+ {hero ? {heroFit.message}
: null}
+ asset.name === plate)} placeholder={t('animator.chooseAsset')} disabled={busy} onOpen={() => onOpenExplorer('narrative-plate')} />
+ {plate && plateFit.level !== 'ok' ? {plateFit.message}
: null}
+ {plate ? : null}
+ {propSlot ? asset.name === prop)} placeholder={t('animator.none')} disabled={busy} onOpen={() => onOpenExplorer('narrative-prop')} /> : null}
+ {foregroundSlot ? asset.name === foreground)} placeholder={t('animator.none')} disabled={busy} onOpen={() => onOpenExplorer('narrative-foreground')} /> : null}
+
+ {template.controls.includes('mood') ? : null}
+ {template.controls.includes('intensity') ? : null}
+ {template.controls.includes('direction') ? : null}
+ {template.controls.includes('camera') ? : null}
+ {template.controls.includes('palette') ? : null}
+ {template.controls.includes('voiceSpace') ? : null}
+
+
+