feat: introduce a new layered spatial workspace architecture design, implement initial card positioning logic, and add container size observation for the layout system.

frontend/src/desktop/DesktopWorkspace.tsx

@@ -90,6 +90,7 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
   viewId,
 }) => {
   const containerRef = useRef<HTMLDivElement>(null);
+  const [isLayoutReady, setIsLayoutReady] = useState(false);
 
   const items = useMemo(() => {
     return entries
@@ -103,6 +104,24 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
   const layoutStore = useMemo(() => new LayoutStore(), []);
   const layoutRef = useRef<Map<string, LayoutCard>>(new Map());
 
+  // Update container size in store
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        layoutStore.setContainerSize(width, height);
+        if (width > 0 && height > 0) {
+          setIsLayoutReady(true);
+        }
+      }
+    });
+
+    observer.observe(containerRef.current);
+    return () => observer.disconnect();
+  }, [layoutStore]);
+
   useEffect(() => {
     if (tenantId && viewId) {
       layoutStore.loadLayout(String(tenantId), viewId);
@@ -191,7 +210,7 @@ const DesktopWorkspace: React.FC<DesktopWorkspaceProps> = ({
             }
           }}
         >
-          {items.map((doc, index) => {
+          {isLayoutReady && items.map((doc, index) => {
             const docId = doc.id ? String(doc.id) : `temp-${index}`;
             const isSelected = selectedDocumentIds.includes(docId);
             const size = ensureDocumentSize(doc);