1  # DreamNode Creator
 2  
 3  **Purpose**: Creation workflow UI for DreamNodes - inline editing in 3D space.
 4  
 5  **Parent feature**: [`dreamnode/`](../dreamnode/README.md) (core types, services, persistence)
 6  
 7  ## Directory Structure
 8  
 9  ```
10  dreamnode-creator/
11  ├── store/
12  │   └── slice.ts              # Creation workflow state (DraftDreamNode, validation)
13  ├── DreamNodeCreator3D.tsx    # Main 3D creation component (self-contained)
14  ├── index.ts                  # Barrel export
15  └── README.md
16  ```
17  
18  ## Main Exports
19  
20  ```typescript
21  // Store (state management)
22  export * from './store/slice';
23  // → createCreationSlice, CreationSlice, DraftDreamNode, ValidationErrors
24  
25  // Components
26  export { default as DreamNodeCreator3D } from './DreamNodeCreator3D';
27  ```
28  
29  ## Workflow
30  
31  1. **Start**: `startCreation(position)` or `startCreationWithData(position, initialData)`
32  2. **Edit**: User modifies title, type, uploads DreamTalk media
33  3. **Validate**: Title required, <255 chars, no invalid filesystem characters
34  4. **Complete**: `completeCreation()` triggers `GitDreamNodeService.create()` in parent feature
35  5. **Cancel**: `cancelCreation()` resets state
36  
37  ## Key Features
38  
39  - **DreamNodeCreator3D**: Self-contained DreamNode creation UI
40    - Renders only when `creationState.isCreating` is true
41    - Title input, type toggle (Dream/Dreamer), file upload
42    - Media preview: Images, videos, PDFs, YouTube thumbnails
43    - Completion animation: Slides z=-25 → z=-75 while fading UI
44    - Keyboard: Enter to create
45  
46  ## Dependencies
47  
48  **From `dreamnode/`**:
49  - `dreamNodeStyles` - Visual constants (dimensions, colors, glows)
50  - `getNodeColors()`, `getNodeGlow()` - Type-specific styling
51  - `isValidDreamTalkMedia()` - Media file validation
52  
53  **External**:
54  - React Three Fiber (`useFrame`)
55  - `@react-three/drei` (`Html`)
56  
57  ## Future Improvements
58  
59  ### Context-Aware Creation in Liminal-Web Mode
60  
61  When in liminal-web mode (viewing a DreamNode's connections), the creator could:
62  - Pre-fill relationship data based on current context
63  - Auto-suggest title based on parent DreamNode's content
64  - Position new node intelligently within the web layout
65  - Create with initial link to the focused DreamNode
66  
67  This would transform creation from "make a thing" to "extend the conversation" - supporting the liminal web's social relationship model.