diff --git a/studio/src/components/SceneBuilder/index.tsx b/studio/src/components/SceneBuilder/index.tsx index 7c9ff551..2fd6949c 100644 --- a/studio/src/components/SceneBuilder/index.tsx +++ b/studio/src/components/SceneBuilder/index.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, ReactElement, useRef, useState } from 'react'; +import { ChangeEvent, ReactElement, useRef } from 'react'; import styled from 'styled-components'; import type { PoseDefinition } from '@lilith/imajin-config'; import { theme } from '../../theme'; @@ -6,34 +6,16 @@ import type { CameraAngle, MaturityRating, SceneState, ShotType } from '../../ty import { PoseGallery } from './PoseGallery'; import { PromptHistory, type HistoryEntry } from './PromptHistory'; +// 2-column grid — sections span 1 or 2 columns depending on content width needs const Container = styled.div` - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: 1fr 1fr; gap: ${theme.spacing.xl}; + align-items: start; `; -const TabRow = styled.div` - display: flex; - gap: ${theme.spacing.xs}; - padding-bottom: ${theme.spacing.lg}; - border-bottom: 1px solid ${theme.colors.border}; -`; - -const Tab = styled.button<{ $active: boolean }>` - padding: ${theme.spacing.xs} ${theme.spacing.md}; - font-size: ${theme.font.size.sm}; - font-weight: ${theme.font.weight.semibold}; - border: 1px solid ${({ $active }) => ($active ? theme.colors.accent : theme.colors.border)}; - border-radius: ${theme.radius.full}; - background: ${({ $active }) => ($active ? theme.colors.accentDim : 'transparent')}; - color: ${({ $active }) => ($active ? theme.colors.accent : theme.colors.textMuted)}; - cursor: pointer; - transition: ${theme.transition}; - - &:hover { - border-color: ${({ $active }) => ($active ? theme.colors.accent : theme.colors.borderHover)}; - color: ${({ $active }) => ($active ? theme.colors.accent : theme.colors.text)}; - } +const FullWidth = styled.div` + grid-column: 1 / -1; `; const Section = styled.div` @@ -329,11 +311,8 @@ interface SceneBuilderProps { // ─── Component ─────────────────────────────────────────────────────────────── -type SceneTab = 'scene' | 'subject'; - export function SceneBuilder({ scene, maturityRating, onChange, onRestoreHistory }: SceneBuilderProps): ReactElement { const fileInputRef = useRef(null); - const [tab, setTab] = useState('scene'); function update(patch: Partial): void { onChange({ ...scene, ...patch }); @@ -376,177 +355,166 @@ export function SceneBuilder({ scene, maturityRating, onChange, onRestoreHistory return ( - {/* Prompt — always visible above tabs */} + {/* Row 1: Prompt — full width */} + +
+ + Scene description + + + + + +