feat(store): add default frame for new documents and target AI insertion

- new documents start with a 1920x1080 white root frame
- AI-generated content inserts into the root frame instead of document root
- export DEFAULT_FRAME_ID constant for cross-module access

src/services/ai/design-generator.ts

@@ -2,7 +2,7 @@ import type { PenNode } from '@/types/pen'
 import type { AIDesignRequest } from './ai-types'
 import { streamChat } from './ai-service'
 import { DESIGN_GENERATOR_PROMPT } from './ai-prompts'
-import { useDocumentStore } from '@/stores/document-store'
+import { useDocumentStore, DEFAULT_FRAME_ID } from '@/stores/document-store'
 
 function extractJsonFromResponse(text: string): PenNode[] | null {
   // Try to extract JSON from markdown code blocks
@@ -70,9 +70,12 @@ export async function generateDesign(
 }
 
 export function applyNodesToCanvas(nodes: PenNode[]): void {
-  const { addNode } = useDocumentStore.getState()
+  const { addNode, getNodeById } = useDocumentStore.getState()
+  // Insert into the root frame if it exists, otherwise at document root
+  const rootFrame = getNodeById(DEFAULT_FRAME_ID)
+  const parentId = rootFrame ? DEFAULT_FRAME_ID : null
   for (const node of nodes) {
-    addNode(null, node)
+    addNode(parentId, node)
   }
 }
 

src/stores/document-store.ts

@@ -3,10 +3,24 @@ import { nanoid } from 'nanoid'
 import type { PenDocument, PenNode, GroupNode } from '@/types/pen'
 import { useHistoryStore } from '@/stores/history-store'
 
+export const DEFAULT_FRAME_ID = 'root-frame'
+
 function createEmptyDocument(): PenDocument {
   return {
     version: '1.0.0',
-    children: [],
+    children: [
+      {
+        id: DEFAULT_FRAME_ID,
+        type: 'frame',
+        name: 'Frame',
+        x: 0,
+        y: 0,
+        width: 1920,
+        height: 1080,
+        fill: [{ type: 'solid', color: '#FFFFFF' }],
+        children: [],
+      },
+    ],
   }
 }