From bcda7e52c37adb662f6df80cb38642c5d2475a8a Mon Sep 17 00:00:00 2001
From: Fini <fini.yang@gmail.com>
Date: Wed, 18 Feb 2026 23:46:16 +0800
Subject: [PATCH] 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 |  9 ++++++---
 src/stores/document-store.ts        | 16 +++++++++++++++-
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/services/ai/design-generator.ts b/src/services/ai/design-generator.ts
index dd6c6d8b4..e4647ab81 100644
--- a/src/services/ai/design-generator.ts
+++ b/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)
   }
 }
 
diff --git a/src/stores/document-store.ts b/src/stores/document-store.ts
index 211c34181..402b2d5eb 100644
--- a/src/stores/document-store.ts
+++ b/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: [],
+      },
+    ],
   }
 }